Laksanakan lun gelongsor dengan jQuery

Dengan populariti peranti mudah alih dan populariti karusel gelongsor, menggunakan jQuery untuk melaksanakan karusel gelongsor telah menjadi salah satu tugas pembangunan bahagian hadapan yang tidak dapat dielakkan. Artikel ini akan memperkenalkan kepada anda cara menggunakan jQuery untuk melaksanakan karusel gelongsor saya harap ia akan membantu pembangunan bahagian hadapan anda.

1. Struktur HTML

Pertama, kita perlu membina struktur HTML asas. Dalam contoh ini, kita memerlukan bekas yang membalut imej dan bekas yang mengandungi titik navigasi. Kodnya adalah seperti berikut:

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="image1.jpg"></li>
    <li class="slider-item"><img src="image2.jpg"></li>
    <li class="slider-item"><img src="image3.jpg"></li>
    <!-- 更多图片 -->
  </ul>
  <ul class="slider-nav">
    <li class="slider-nav-item active"></li><!-- 第一个导航点默认选中 -->
    <li class="slider-nav-item"></li>
    <li class="slider-nav-item"></li>
    <!-- 更多导航点 -->
  </ul>
</div>

2. Gaya CSS

Seterusnya, kita perlu menetapkan gaya CSS untuk imej karusel. Pertama, kita perlu menetapkan lebar dan ketinggian bekas yang mengandungi imej, dan menyembunyikan bahagian limpahan bekas. Kodnya adalah seperti berikut:

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.slider-wrapper {
  position: relative;
  width: 300%;
  height: 400px; /* 需要与.slider一致 */
  left: 0;
}
.slider-item {
  position: relative;
  float: left;
  width: 33.3333%;
  height: 400px; /* 需要与.slider一致 */
}

Seterusnya, kita perlu menetapkan gaya CSS untuk titik navigasi. Kodnya adalah seperti berikut:

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.slider-nav-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #f00;
}

3. Kod JavaScript

Akhir sekali, kita perlu menggunakan jQuery untuk melaksanakan carta karusel. Pertama, kita perlu menentukan beberapa pembolehubah, termasuk indeks imej karusel semasa (indeks), bekas yang mengandungi imej ($pembungkus), bekas titik navigasi ($nav), titik navigasi ($navItems) dan nombor imej karusel (imgCount ). Kodnya adalah seperti berikut:

var index = 0;
var $wrapper = $('.slider-wrapper');
var $nav = $('.slider-nav');
var $navItems = $nav.find('.slider-nav-item');
var imgCount = $wrapper.find('.slider-item').length;

Seterusnya, kita perlu menentukan fungsi untuk memainkan imej karusel secara automatik. Kaedah pelaksanaan fungsi ini adalah untuk mengemas kini indeks imej karusel semasa secara berterusan dan membiarkan bekas yang mengandungi imej bergerak pada jarak yang sepadan. Kodnya adalah seperti berikut:

function autoplay() {
  index++;
  if (index >= imgCount) {
    index = 0;
  }
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
}

Akhir sekali, kita perlu menentukan pemasa untuk membolehkan karusel dimainkan secara automatik dalam selang waktu tertentu. Kodnya adalah seperti berikut:

var intervalId = setInterval(autoplay, 3000);

Jika pengguna mengklik pada titik navigasi, pemasa perlu dibatalkan dan carta karusel melompat ke kedudukan yang sepadan. Kodnya adalah seperti berikut:

$navItems.on('click', function() {
  clearInterval(intervalId);
  index = $(this).index();
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
  intervalId = setInterval(autoplay, 3000);
});

4. Ringkasan

Apabila menggunakan jQuery untuk melaksanakan carta karusel gelongsor, anda perlu memberi perhatian kepada perkara berikut:

1. Struktur HTML mesti mengandungi semua karusel Bekas untuk imej dan titik navigasi, dan elemen HTML untuk imej dan titik navigasi.
2. Gaya CSS perlu menetapkan lebar dan tinggi bekas yang mengandungi imej dan menyembunyikan bahagian limpahan bekas.
3. Mesti menentukan pembolehubah seperti indeks imej karusel, bekas yang mengandungi imej, bekas titik navigasi, bilangan titik navigasi dan imej karusel.
4. Fungsi karusel automain perlu sentiasa mengemas kini indeks karusel semasa supaya bekas yang mengandungi imej bergerak pada jarak yang sepadan.
5. Pemasa mesti digunakan untuk membenarkan karusel dimainkan secara automatik dalam selang waktu tertentu.
6. Jika pengguna mengklik pada titik navigasi, pemasa perlu dibatalkan dan carta karusel melompat ke kedudukan yang sepadan.

Atas ialah kandungan terperinci Laksanakan lun gelongsor dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!