Javascript implémente l'effet carrousel d'images (2) Contrôler l'implémentation des compétences nodes_javascript de séquence d'images

Lecture recommandée : Code Jquery pour obtenir un effet carrousel d'images (1)

Dans le dernier article, je vous ai présenté Javascript pour implémenter l'effet carrousel d'images (1) pour faire sauter l'image Ici, nous implémentons l'implémentation du saut du nœud de séquence d'images pendant que l'image saute. , nous avons généralement besoin de savoir à quelle position il saute. Voici le nœud de séquence d'images qui doit être affiché avec l'image directement ci-dessous.

Avant d'entrer dans le texte principal, laissez-moi vous montrer les rendus :

Dans la structure du code HTML et CSS, nous devons ajouter un style pour déterminer si la séquence d'images est sélectionnée

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

Dans le code JS, nous devons apporter quelques modifications et ajouts au code JS dans l'article précédent. La première chose à changer ici est d'encapsuler le code de saut dans une méthode, puis de renvoyer la valeur de setInterval. Principalement pour implémenter certaines fonctions pour les nœuds de séquence.

Puis dans le code du saut, changez le style du nœud de séquence correspondant afin de pouvoir afficher la position du saut.

//图片节点
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();

Ici, nous devons également ajouter un contrôle dans l'état de survol du nœud de séquence.

Le saut d'image doit s'arrêter après le survol et les images qui doivent rester sous le survol sont affichées. Le nombre de nœuds de séquence correspond au nombre d'images, de sorte que d'autres états peuvent être modifiés via l'emplacement du nœud de séquence actuel. .

Lorsque la souris quitte le nœud de séquence, l'image devrait continuer à sauter automatiquement.

//增加序列节点的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();
}
}

De cette façon, nous avons complété l'effet de la deuxième étape. À ce stade, la description complète de cet article vous a été présentée, j'espère qu'elle sera utile à tout le monde.