In diesem Artikel wird der spezifische Code von js zur Erzielung des Karussell-Map-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt 1. HTML-Teil <div id="box"> <ul> <li class="show"><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/5.jpg" alt=""></li> <li><img src="img/6.jpg" alt=""></li> </ul> <img src="img/l.png" alt="" id="lef"> <img src="img/r.png" alt="" id="rig"> <ol> <li Klasse="Fokus" Daten-i = "0"></li> <li Daten-i = "1"></li> <li data-i = "2"></li> <li data-i = "3"></li> <li data-i = "4"></li> <li data-i = "5"></li> </ol> </div> 2. js-Teil <Skript> var liList = document.querySelectorAll("#box ul li") var olList = document.querySelectorAll("#box ol li") var rig = document.getElementById("rig") var lef = document.getElementById("lef") Variablenindex = 0 Funktion setLi(){ für(var i = 0;i <liList.length;i++){ liList[i].className = "" olList[i].className = "" } liList[index].className = "anzeigen" olList[index].className = "Fokus" } //Rechts.beiKlick = Funktion(){ wenn(index !== 5){ Index++ } wenn(index === 5){ Index = 0 } setLi() } //Links lef.onclick = function(){ wenn(index !== 0){ Index-- } wenn(index === 0){ Index = 5 } setLi() } //Punkt für (var i = 0;i < olList.length;i++) { olList[i].onclick = Funktion(){ index = this.getAttribute("data-i") setLi() } } // Zeitliche Abfolge var autoPlay = setInterval( Funktion(){ rig.klick() },3000) //Bewegen Sie die Maus darüber, um die Wiedergabe zu stoppen var box = document.querySelector("div") box.onmouseenter = Funktion(){ Intervall löschen (automatische Wiedergabe) } // Bewege die Maus weg und spiele weiter box.onmouseleave = function(){ autoPlay = Intervall festlegen( Funktion(){ rig.klick() },3000) } </Skript> Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So implementieren Sie geplante Aufgaben der zweiten Ebene mit dem Linux Crontab Shell-Skript
>>: mysql erhält statistische Daten innerhalb eines bestimmten Zeitraums
SVN ist die Abkürzung für Subversion, ein Open-So...
Vorwort In unserer täglichen Arbeit müssen wir hä...
Hintergrund - Online Alert Ein Online-Server hat ...
Inhaltsverzeichnis Was ist eine Multiumgebungskon...
Wenn Menschen zu lange untätig waren, denken sie,...
Inhaltsverzeichnis Prototypen verstehen Prototypo...
Was sind HTTP-Header HTTP ist eine Abkürzung für ...
1. Verwenden Sie grundlegende Textelemente, um In...
Wie in der Abbildung gezeigt: Tabellendaten Wie e...
Kommen wir heute gleich zur Sache und sprechen üb...
Lösung Fügen Sie position:relative zum übergeordn...
Installationsschritte 1. Erstellen Sie eine virtu...
Um die Version und das Tag des Bildes anzuzeigen,...
Nginx wurde in der Programmiersprache C entwickel...
Beim Importieren von Daten mit falscher MySQL-Zei...