Rumah > Artikel > hujung hadapan web > 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:
Atas ialah kandungan terperinci Laksanakan lun gelongsor dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!