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
Überprüfen Sie die Transaktionsisolationsebene In...
Definition und Verwendung: Verwenden Sie die Slot...
In diesem Artikel wird der spezifische Code für J...
Da es im Internet nur wenige und unzureichende In...
Inhaltsverzeichnis 3 Möglichkeiten zum Bereitstel...
Hauptsächlich verwendete Wissenspunkte: •CSS3 3D-...
Inhaltsverzeichnis 1. Index-Grundlagen 1.1 Einlei...
In Bezug auf die Anzeige: flexibles Layout: Manch...
Betriebsumgebung: MAC Docker-Version: Docker vers...
Grundaufbau: Code kopieren Der Code lautet wie fol...
In diesem Artikel wird der spezifische JavaScript...
Inhaltsverzeichnis Erste Methode App.vue Startsei...
Importieren Sie die aus der Oracle-Datenbank expo...
Hintergrund go-fastdfs ist ein verteiltes Dateisy...
Was ist Keepalive? Bei der normalen Entwicklung m...