Berdasarkan artikel sebelumnya menggunakan JS untuk mengimplementasikan kode efek carousel gambar (i), peristiwa respons panah kiri dan kanan ditambahkan, dan mengklik panah kiri dan kanan juga dapat membuat gulir gambar:
Kode JS adalah sebagai berikut:
window.onload = function(){//carousel initialization var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img');var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');var next = document.getElementById('next');var prev = document.geteLementById ('prev'); var item = 0; // Dalam keadaan awal, sebuah lingkaran ada dalam mode highlight lis [0] .style.fontsize = '26px'; lis [0] .style.color = '#ffff'; iMgs [0] .style.display = 'blok'; 1; // Carousel Otomatis. Gunakan PIC_TIME untuk merekam pemutaran, dan Anda dapat menggunakan ClearInterVal () untuk menghapusnya kapan saja. var pic_time = setInterval (autobofang, 1000); // autoplay acara pemrosesan acara autobofang () {if (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // carousel manual untuk (var i = 0; lis [i] .addeventListener ("mouseover", ubah, false);} function change (event) {var event = event || window.event; var target = event.target || event.srcelement; var anak -anak = target.parentnode.Children; untuk (var i = 0; i <children.length; i ++) {if (target == anak -anak [i]) {picchange (i); }}} // Fungsi switching gambar picchange (i) {// Biarkan semua gambar tidak ditampilkan, dan semua lingkaran dalam gaya normal untuk (var j = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'none'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '#999';} // Biarkan tampilan gambar indeks yang dipilih, dan lingkaran yang sesuai disorot IMGS [i] .style.display = 'blok'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Ketika mouse bergerak lebih dekat ke area gambar, pemutaran otomatis menghentikan lunbo.addeventListener ("mouseover", function () {clearInterval (pic_time);}, false); // Ketika mouse keluar dari area gambar, playback otomatis berlanjut lunbo.addeventenerererererererer (mouse {function {function {function {function {function (function ") setInterval (autobofang, 1000);}, false); // Reverse panah klik peristiwa, gambar akan berubah terus menerus dengan acara klik next.addeventListener ("klik", moveNext, false); function moveNext () {if (item == 2) {item = 0;} else {item+= 1;} picchange (item);} prev.addeventListener ("klik", movePrev, false); function movePrev () {if (item == 0) {item = 2;} else {item- = 1;} picchange (item);}}Diagram reproduksi: Diagram reproduksi mouse yang melewati panah
Ketika mouse mengklik panah, gambar akan berubah, dan lingkaran kecil di bawah ini juga akan menampilkan efek highlight dari gambar yang sesuai.
Meringkaskan:
Efek korsel dasar telah tercapai. Apa yang perlu dilakukan nanti adalah menyederhanakan dan merangkum kode dan meningkatkan efisiensi operasional.