Javascript implementiert den Bildkarusselleffekt (2) Steuern Sie die Implementierung von Bildsequenzknoten_Javascript-Fähigkeiten

Empfohlene Lektüre: JQuery-Code zum Erzielen eines Bildkarusselleffekts (1)

Im letzten Artikel habe ich Ihnen Javascript zur Implementierung des Bildkarusselleffekts (1) vorgestellt, um das Bild springen zu lassen Hier implementieren wir die Sprungimplementierung des Bildsequenzknotens Während das Bild springt Im Allgemeinen müssen Sie wissen, zu welcher Position er springt. Hier ist der Bildsequenzknoten, der zusammen mit dem Bild angezeigt werden muss

Bevor ich zum Haupttext komme, möchte ich Ihnen die Darstellungen zeigen:

In der HTML- und CSS-Codestruktur müssen wir einen Stil hinzufügen, um zu bestimmen, ob die Bildsequenz ausgewählt ist

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

Im JS-Code müssen wir einige Änderungen und Ergänzungen am JS-Code im vorherigen Artikel vornehmen. Das erste, was wir hier ändern müssen, ist, den Sprungcode in eine Methode zu kapseln und dann den Wert von setInterval zurückzugeben Hauptsächlich um einige Funktionen für Sequenzknoten zu implementieren.

Ändern Sie dann im Sprungcode den Stil des entsprechenden Sequenzknotens, um die Sprungposition anzeigen zu können.

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

Hier müssen wir auch die Steuerung im Schwebezustand des Sequenzknotens hinzufügen.

Der Bildsprung sollte nach dem Hover stoppen und die Bilder, die unter dem Hover bleiben sollen, werden angezeigt. Die Anzahl der Sequenzknoten entspricht der Anzahl der Bilder, sodass andere Zustände über die Position des aktuellen Sequenzknotens geändert werden können .

Wenn die Maus den Sequenzknoten verlässt, sollte das Bild automatisch weiterspringen.

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

Auf diese Weise haben wir die Wirkung des zweiten Schritts abgeschlossen. An dieser Stelle wurde Ihnen die gesamte Beschreibung vorgestellt. Ich hoffe, sie wird für alle hilfreich sein.