Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, JavaScript telah menjadi bahagian yang amat diperlukan dalam pembangunan bahagian hadapan. Dalam reka bentuk web, imej karusel ialah kaedah paparan yang sangat biasa, yang boleh membantu tapak web mempersembahkan imej, teks dan kandungan lain dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan carta karusel mudah.
1. Reka letak HTML
Pertama, kita perlu membina reka letak HTML karusel. Di sini, kaedah HTML dan CSS yang agak mudah digunakan untuk mencipta bekas carta karusel, seperti yang ditunjukkan di bawah:
<div class="slider"> <ul class="slider-items"> <li class="slider-item"><img src="1.jpg"></li> <li class="slider-item"><img src="2.jpg"></li> <li class="slider-item"><img src="3.jpg"></li> </ul> </div>
Antaranya, .slider
mewakili bekas carta karusel, .slider-items
mewakili bekas item carta karusel , dan .slider-item
mewakili satu item karusel. Kita perlu menetapkan atribut .slider-items
dalam left
untuk mengawal pergerakan item karusel dalam JavaScript.
2. Pelaksanaan JS karusel
1 Dapatkan elemen
Untuk melaksanakan carta karusel, anda perlu mendapatkan nod elemen yang perlu dikendalikan tentukan tatasusunanitems
, digunakan untuk menyimpan item carta karusel, dan dapatkan kelas querySelectorAll()
melalui kaedah slider-item
Kodnya adalah seperti berikut:
var slider = document.querySelector('.slider'); var sliderItems = document.querySelectorAll('.slider-item'); var items = []; for (var i = 0; i < sliderItems.length; i++) { items.push(sliderItems[i]); }
2 Tetapkan parameter yang berkaitan
dalam proses melaksanakan carta karusel , kita perlu menetapkan parameter yang berkaitan, seperti item yang dipilih pada masa ini, lebar karusel, dan tetapkan peralihan antara item terakhir dan item pertama, dsb. Kodnya adalah seperti berikut:
var current = 0; var width = 600; var height = 400; var imgCount = items.length; var animationSpeed = 1000; var pause = 3000; var interval; var sliderContainer = document.querySelector('.slider-items'); sliderContainer.style.width = width * items.length + 'px'; sliderContainer.style.height = height + 'px';
3. Laksanakan carta karusel
Seterusnya, kita boleh menggunakan JavaScript untuk melaksanakan carta karusel. Proses khusus ialah:
(1) Cipta fungsi startSlide
dan fungsi slideLeft
.
startSlide()
: Digunakan untuk memulakan karusel. Item seterusnya daripada item yang dipilih pada masa ini ditakrifkan dalam fungsi Jika item semasa adalah item terakhir, item seterusnya ditetapkan sebagai item pertama, dan carta karusel digelung melalui kaedah setInterval()
slideLeft()
digunakan dalam fungsi untuk melakukan peralihan animasi dan melengkapkan kesan karusel. animate()
function startSlide() { interval = setInterval(function () { slideLeft(); }, pause); } function slideLeft() { if (current === imgCount - 1) { current = -1; } current++; animate(sliderContainer, -width * current, animationSpeed); }
untuk mencapai kesan animasi. Fungsi ini menggunakan kaedah animate
untuk mencapai peralihan animasi yang lancar, dengan itu mencapai kesan karusel yang lebih baik. requestAnimationFrame()
function animate(el, left, speed) { var start = el.offsetLeft; var destination = left; var startTime = new Date().getTime(); var distance = destination - start; function frame() { var elapsedTime = new Date().getTime() - startTime; var position = easeInOutQuart(elapsedTime, start, distance, speed); el.style.left = position + 'px'; if (elapsedTime < speed) { requestAnimationFrame(frame); } } frame(); }
untuk mengoptimumkan kesan animasi. easeInOutQuart
function easeInOutQuart(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; }
dan addEventListener()
melalui kaedah mouseenter
untuk menjeda dan memulakan karusel apabila tetikus bergerak masuk dan keluar. Kod lengkap adalah seperti berikut: mouseleave
slider.addEventListener('mouseenter', function () { clearInterval(interval); }); slider.addEventListener('mouseleave', function () { startSlide(); }); startSlide();
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JavaScript轮播图实现</title> <style> .slider { width: 600px; height: 400px; overflow: hidden; position: relative; } .slider-items { position: absolute; top: 0; left: 0; list-style: none; margin: 0; padding: 0; } .slider-item { display: inline-block; width: 600px; height: 400px; } </style> </head> <body> <div class="slider"> <ul class="slider-items"> <li class="slider-item"><img src="1.jpg"></li> <li class="slider-item"><img src="2.jpg"></li> <li class="slider-item"><img src="3.jpg"></li> </ul> </div> <script> var slider = document.querySelector('.slider'); var sliderItems = document.querySelectorAll('.slider-item'); var items = []; for (var i = 0; i < sliderItems.length; i++) { items.push(sliderItems[i]); } var current = 0; var width = 600; var height = 400; var imgCount = items.length; var animationSpeed = 1000; var pause = 3000; var interval; var sliderContainer = document.querySelector('.slider-items'); sliderContainer.style.width = width * items.length + 'px'; sliderContainer.style.height = height + 'px'; function startSlide() { interval = setInterval(function () { slideLeft(); }, pause); } function slideLeft() { if (current === imgCount - 1) { current = -1; } current++; animate(sliderContainer, -width * current, animationSpeed); } function animate(el, left, speed) { var start = el.offsetLeft; var destination = left; var startTime = new Date().getTime(); var distance = destination - start; function frame() { var elapsedTime = new Date().getTime() - startTime; var position = easeInOutQuart(elapsedTime, start, distance, speed); el.style.left = position + 'px'; if (elapsedTime < speed) { requestAnimationFrame(frame); } } frame(); } function easeInOutQuart(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; } slider.addEventListener('mouseenter', function () { clearInterval(interval); }); slider.addEventListener('mouseleave', function () { startSlide(); }); startSlide(); </script> </body> </html>
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan carta karusel javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!