js zum Schreiben des Karusselleffekts

js zum Schreiben des Karusselleffekts

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:
  • JavaScript implementiert kreisförmiges Karussell
  • Mehrere Methoden zur Implementierung von Karussellbildern in JS
  • Implementierung eines einfachen Karussells auf Basis von JavaScript
  • JavaScript imitiert den Jingdong-Karusselleffekt
  • JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells
  • Natives JS zum Erzielen eines nahtlosen Karusselleffekts
  • js, um einen mobilen Karussell-Schiebeschalter zu erreichen
  • Javascript zur Realisierung des Scrollrad-Karussellbildes
  • Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

<<:  So implementieren Sie geplante Aufgaben der zweiten Ebene mit dem Linux Crontab Shell-Skript

>>:  mysql erhält statistische Daten innerhalb eines bestimmten Zeitraums

Artikel empfehlen

Ein kurzes Verständnis des Unterschieds zwischen MySQL Union All und Union

Union ist eine Vereinigungsoperation für die Date...

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

Vorwort Wenn Sie RabbitMQ verwenden und für einen...

Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz

<br />Vorheriger Artikel: Webdesign-Tutorial...

JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts

Verwenden Sie Leinwand, um eine bunte Uhr zu schr...

VMware Workstation-Installation (Linux-Kernel) Kylin-Grafik-Tutorial

In diesem Artikel erfahren Sie, wie Sie Kylin auf...

Detaillierte Erläuterung des Beispiels für MySQL-Integritätsbeschränkungen

Dieser Artikel beschreibt die MySQL-Integritätsbe...

Zehn Erfahrungen im Webdesign im Jahr 2008

<br />Das Internet verändert sich ständig un...

React-Beispiel zum Abrufen des Werts aus dem Eingabefeld

Reagieren Sie auf mehrere Arten, um den Wert des ...

So entfernen Sie „Enter“, „Senden“ und „Enter != Senden“ aus dem Formular

Um das Problem „Eingeben != Absenden“ zu implement...