Bagaimana untuk melakukan karusel dengan jquery

Dengan populariti peranti mudah alih, karusel telah menjadi salah satu ciri biasa dalam banyak tapak web dan aplikasi. jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang menyediakan banyak kaedah mudah dan praktikal, menjadikannya sangat mudah dan mudah untuk membangunkan karusel.

Langkah berikut akan menunjukkan kepada anda cara menggunakan jQuery untuk mencipta carta karusel ringkas. Pertama, kita perlu menyediakan beberapa kod HTML dan CSS asas.

Kod HTML

 
 
 
 
 
 
 Previous Next 
 

Kod CSS

.slider { position: relative; height: 300px; width: 600px; overflow: hidden; } .slides { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; flex-wrap: nowrap; transition: transform 0.6s ease; } .slide { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } .slide img { max-height: 100%; max-width: 100%; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; } .controls span { margin: 0 10px; cursor: pointer; }

Dalam kod HTML di atas, kami mempunyai karusel yang mengandungi tiga imej. Imej disimpan dalam tagimgdan setiap imej dibalut dengan elemenslidedengan nama kelasdiv. Butang kawalan karusel berada di bahagian bawah elemendivdan diwakili menggunakan elemenprevdengan nama kelasnextdanspan.

Dalam kod CSS, kami menetapkan ketinggian dan lebar bekas karusel kepada300pxdan600px, dan tetapkanoverflow: hiddenuntuk memastikan hanya satu elemendivdipaparkan. Semua elemenslidemempunyai ketinggian yang sama dan dibentangkan secara mendatar dalam elemen induk menggunakan reka letak Flex. Butang kawalan dipusatkan dan dijajarkan secara mendatar menggunakan reka letak Flex.

Kini kita boleh mencipta kod karusel langkah demi langkah.

Dalam langkah pertama, kita perlu menggunakan jQuery untuk memilih elemen yang berkaitan dalam karusel dan menyimpan rujukannya untuk digunakan dalam kod berikutnya. Ia kelihatan seperti ini:

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next');

Dalam langkah kedua, kita perlu mengira lebar setiap elemenslidedan menyusunnya dalam satu baris. Seperti yang ditunjukkan di bawah:

var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px');

Dalam langkah ketiga, kita perlu menulis fungsinextdanprevsupaya imej karusel boleh bergerak apabila butang kawalan diklik. Pelaksanaan khusus di sini melibatkan operasi matematik yang kompleks untuk mengira offset, tetapi ia boleh dicapai menggunakan fungsianimate(). Seperti yang ditunjukkan di bawah:

$next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); });

Dalam langkah keempat, kita perlu menyediakan pemasa gelung untuk menjalankan fungsinextsecara automatik sekali-sekala. Seperti yang ditunjukkan di bawah:

var interval = setInterval(function() { $next.click(); }, 3000);

Langkah terakhir ialah melarang pengguna daripada mengklik butang kawalan apabila imej karusel bergerak untuk mengelakkan pertindihan animasi dan ralat karusel. Seperti yang ditunjukkan di bawah:

$slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

Kini, kami telah melengkapkan karusel ringkas. Keseluruhan coretan kod kelihatan seperti ini:

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next'); var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px'); $next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); }); var interval = setInterval(function() { $next.click(); }, 3000); $slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

Selepas melengkapkan langkah di atas, anda boleh menyesuaikan penampilan dan kefungsian karusel menggunakan gaya CSS dan kod HTML anda sendiri, dan menyepadukannya dengan lancar ke dalam tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk melakukan karusel dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!