


Javascript implementiert den Bildkarusselleffekt (2) Steuern Sie die Implementierung von Bildsequenzknoten_Javascript-Fähigkeiten
May 16, 2016 pm 03:15 PMEmpfohlene 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
#slider ol li a.active{ background-color: #ffffff; color: #ff0000; }
Ä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();
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(); } }

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist

HTTP-Debugging mit Knoten und HTTP-Konsole

Benutzerdefinierte Google -Search -API -Setup -Tutorial

JQuery fügen Sie Scrollbar zu Div hinzu
