Javascript melaksanakan kesan karusel imej (2) Kawalan pelaksanaan kemahiran nodes_javascript jujukan imej

Bacaan yang disyorkan: Kod Jquery untuk mencapai kesan karusel imej (1)

Dalam artikel lepas, saya memperkenalkan anda kepada Javascript untuk melaksanakan kesan karusel imej (1) untuk membuat lompatan imej Di sini kami melaksanakan pelaksanaan lompatan nod jujukan imej , kita Secara amnya, anda perlu tahu kedudukan mana yang dia lompat Berikut ialah nod jujukan gambar yang perlu dipaparkan bersama-sama dengan gambar tersebut

Sebelum saya masuk ke teks utama, izinkan saya menunjukkan kepada anda rendering:

Dalam struktur kod HTML dan CSS, kita perlu menambah gaya untuk menentukan sama ada jujukan imej dipilih

#slider ol li a.active{
background-color: #ffffff;
color: #ff0000;
}

Dalam kod JS, kita perlu membuat beberapa perubahan dan penambahan pada kod JS dalam artikel sebelumnya Perkara pertama yang perlu diubah di sini ialah merangkumkan kod lompat ke dalam kaedah, dan kemudian mengembalikan nilai setInterval This Terutamanya untuk melaksanakan beberapa fungsi untuk nod jujukan.

Kemudian dalam kod lompat, tukar gaya nod jujukan yang sepadan supaya dapat memaparkan kedudukan lompatan.

//图片节点
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
//图片序列节点
var numol = slider.getElementsByTagName("ol")[0];
var numlinks = numol.getElementsByTagName("a");
//共享序列
var index = 0;
//图片跳转,图片跳转的同时,改变序列节点的跳转
var jump = function () {
return setInterval(function(){
if(index >= len){
index = 0;
}
//图片跳转
imgul.style.left = - (800 * index) + "px";
//改变序列节点样式:首先要清除所有的链接的样式,然后在激活对应的序列节点样式
for (var i = 0; i < len; i++) {
numlinks[i].setAttribute("class","");
}
numlinks[index].setAttribute("class","active");
index++;
},2000);
};
var jumpindex = jump();

Di sini kita juga perlu menambah kawalan dalam keadaan tuding nod jujukan.

Lompatan gambar harus berhenti selepas tuding, dan gambar yang sepatutnya berada di bawah tuding dipaparkan Bilangan nod jujukan sepadan dengan bilangan gambar, jadi keadaan lain boleh ditukar melalui lokasi nod jujukan semasa. .

Apabila tetikus meninggalkan nod jujukan, gambar harus terus melompat secara automatik.

//增加序列节点的hover控制: 1. hover后要禁止图片的跳转,显示在当前的图片上,这里就需要清除跳转 2.hover离开后,在当前的图片上做图片的跳转
for (var i = 0; i < len; i++){
//hover
numlinks[i].onmouseover = function () {
clearInterval(jumpindex);
for (var i = 0; i < len; i++) {
numlinks[i].setAttribute("class","");
if (numlinks[i] === this){
index = i;
}
}
imgul.style.left = - (800 * index) + "px";
numlinks[index].setAttribute("class","active");
}
//out
numlinks[i].onmouseout = function(){
jumpindex = jump();
}
}

Dengan cara ini, kami telah menyelesaikan kesan langkah kedua Pada ketika ini, keseluruhan penerangan artikel ini telah diperkenalkan kepada anda.