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

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
  </div>
  <div class="controls">
    <span class="prev">Previous</span>
    <span class="next">Next</span>
  </div>
</div>

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 tag img dan setiap imej dibalut dengan elemen slide dengan nama kelas div. Butang kawalan karusel berada di bahagian bawah elemen div dan diwakili menggunakan elemen prev dengan nama kelas next dan span.

Dalam kod CSS, kami menetapkan ketinggian dan lebar bekas karusel kepada 300px dan 600px, dan tetapkan overflow: hidden untuk memastikan hanya satu elemen div dipaparkan. Semua elemen slide mempunyai 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 elemen slide dan 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 fungsi next dan prev supaya 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 fungsi animate(). 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 fungsi next secara 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!