Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

Das einfache, nahtlos scrollende Karussell weist viele Lücken auf, was bedeutet, dass es sehr umständlich ist, nachträglich Bilder hinzuzufügen, und dass viele Stellen geändert werden müssen. Es ist außerdem stark gekoppelt und nur auf einen Teil des Programms anwendbar. Daher können wir den Code aktualisieren, indem wir die Bildstruktur ändern und den Konvertierungspunkt berechnen.

Ursprünglicher einfacher Scroll-Karussellcode

<html>
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        .scrollen{
            Position: relativ;
            Breite: 830px;/*Anzeigebreite: 4 Bilder + 3 Ränder = 830*/
            Höhe: 130px;
            Rand: 10px durchgezogen rgb(15, 15, 15);
            Rand: 100px automatisch;
            Überlauf: versteckt;
        }
        .scroll ul{
            Position: absolut;
            Breite: 5000px;/*ul kann die Breite aller li speichern*/
            Höhe: 130px;
            oben: 0;
            links: 0;
        }
        .scroll ul li{
            schweben: links;
            Breite: 200px;
            Höhe: 130px;
            Rand rechts: 10px;
            Überlauf: versteckt;
        }

    </Stil>
</Kopf>
<Text>
    <div id="scrollen" Klasse="scrollen">
        <ul id="munit">
            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>

            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>
        </ul>
    </div>

    <Skript>
        //Element abrufen var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");
        var li = munit.kinder;
        // Scrollen var nowLeft = 0;
        //Um den Wendepunkt der Bewegung des ul-Elements zu finden, var back = -1470; //Das Bild und der Rand haben die Breite von li und es werden 4 Bilder angezeigt, also liegt der Wendepunkt bei 1260
        //Zeitgeber var Zeitgeber = setInterval(run,20);

        //Bewegen Sie die Maus darüber und das Scrollen stoppt scroll.onmouseover = function(){
            Intervall löschen(Timer);
        }
        // Karussell entfernen scroll.onmouseout = function(){
            Timer = Intervall einstellen(Lauf,20);
        }

        //Bewegungsfunktion function run(){
            jetztLinks -= 2;
            //Beurteilen Sie, ob Sie den Wendepunkt erreicht haben. Wenn ja, wechseln Sie sofort zur Position 0 if (nowLeft <= back) {
                jetztLinks = 0;
            }
            munit.style.left = jetztLinks + "px";
        }

       
    </Skript>
</body>
</html>

Fügen Sie in der Struktur <div id="scroll"> ein übergeordnetes div zu ul hinzu, damit Sie später Bilder hinzufügen und den Konvertierungspunkt berechnen können, indem Sie später die Breite von ul ermitteln.
1. Die Rabattpunktberechnung muss automatisch von Js berechnet werden
var back = -munit.offsetWidth; //Das Element bewegt sich nach links, der Wert ist negativ
2. Automatisches Generieren eines weiteren Satzes entsprechender Bildstrukturen li
munit.innerHTML = munit.innerHTML + munit.innerHTML; //Dadurch wird ein Satz von li-Tags hinzugefügt und das spätere Hinzufügen von Bildern wird auch einige Codes erweitern und ändern.

CSS-Umschreibeteil:
  /*Fügen Sie ein übergeordnetes Div zu ul hinzu, damit Sie die Breite von ul später nach dem Hinzufügen von Bildern ermitteln können*/
        .scroll .inner{
            Position: relativ;
            Breite: 5000px;
        }
        .scroll ul{
            Position: absolut;
            Höhe: 130px;
            oben: 0;
            links: 0;
            Listenstil: keiner;


Teil zum Umschreiben des Hauptteils:      
<Text>
    <div id="scrollen" Klasse="scrollen">
       <div Klasse="inner">
           <ul id="munit">
              <li><img src="../BOM/shuzi/3.png" alt=""></li>
              <li><img src="../BOM/shuzi/4.png" alt=""></li>
              <li><img src="../BOM/shuzi/5.png" alt=""></li>
              <li><img src="../BOM/shuzi/6.png" alt=""></li>
              <li><img src="../BOM/shuzi/7.png" alt=""></li>
              <li><img src="../BOM/shuzi/8.png" alt=""></li>
              <li><img src="../BOM/shuzi/9.png" alt=""></li>
              <li><img src="../BOM/shuzi/10.png" alt=""></li>
          </ul>
       </div>
    </div>

JS-Umschreibeteil:
<Skript>
        //Element abrufen var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");

        //Teil neu schreiben//1 Die Berechnung des Rückgabepunkts muss automatisch von Js durchgeführt werden. var back = -munit.offsetWidth;//Das Element bewegt sich nach links, der Wert ist negativ//2 Erzeuge automatisch einen weiteren Satz entsprechender Bildstrukturen li
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        // Scrollen var nowLeft = 0;
        //Zeitgeber var Zeitgeber = setInterval(run,20);

        //Bewegen Sie die Maus darüber und das Scrollen stoppt scroll.onmouseover = function(){
            Intervall löschen(Timer);
        }
        // Karussell entfernen scroll.onmouseout = function(){
            Timer = Intervall einstellen(Lauf,20);
        }

        //Bewegungsfunktion function run(){
            jetztLinks -= 1;
            //Beurteilen Sie, ob Sie den Wendepunkt erreicht haben. Wenn ja, wechseln Sie sofort zur Position 0 if (nowLeft <= back) {
                jetztLinks = 0;
            }
            munit.style.left = jetztLinks + "px";
        }

    </Skript>
</body>
</html>

Diese Art von Code weist eine geringe Kopplung auf und eignet sich auch zum Hinzufügen beliebiger Anzahlen und Bilder beliebiger Größe.

Oben sind die Details des Beispielcodes des einfachen nahtlosen Scroll-Karussells, das von nativem Js implementiert wird. Weitere Informationen zum einfachen nahtlosen Scroll-Karussell, das von Js implementiert wird, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • So erreichen Sie mit JavaScript nahtloses Scrollen und automatisches Abspielen von Karussellbildern
  • Objektorientierte JavaScript-Implementierung eines nahtlos scrollenden Karussellbeispiels
  • JavaScript zum Erstellen eines speziell geformten Scroll-Karussells
  • JS realisiert den nach oben scrollenden Karusselleffekt des Rankingtextes
  • js Karussell nahtloser Scrolleffekt
  • JS-Fokus-Karusselleffekt perfekt implementieren (Teil 2) (scrollbare Bilder)
  • JavaScript-Karussell und benutzerdefinierte Bildlaufleiste mit Mausrad-Sharing-Code-Post
  • Einfaches JS-Karussell-Bild-Scrolling-Beispiel
  • Beispielcode zur Implementierung eines Karussells mit nativem JS
  • Detaillierte Erklärung des Prinzips der Erstellung eines JavaScript-Scrolling-Karussells

<<:  MySQL fragt den aktuellsten Datensatz der SQL-Anweisung ab (Optimierung)

>>:  Installations-Tutorial zur komprimierten Version von MySQL 8.0.11

Artikel empfehlen

Implementierung der React-Sternebewertungskomponente

Voraussetzung ist die Eingabe der Bewertungsdaten...

Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte

Ich habe schon lange keinen Blog mehr geschrieben...

Installationsschritte von Docker-CE auf dem Raspberry Pi 4b Ubuntu19-Server

Das Raspberry Pi-Modell ist 4b, 1 G RAM. Das Syst...

So implementieren Sie eine einzelne Dateikomponente in JS

Inhaltsverzeichnis Überblick Einzelne Dateikompon...

Detaillierte Erklärung der Truncate-Verwendung in MySQL

Vorwort: Wenn wir eine Tabelle löschen möchten, v...

Teilen Sie 8 MySQL-Fallstricke, die Sie erwähnen müssen

MySQL ist einfach zu installieren, schnell und ve...

Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

Inhaltsverzeichnis 1. Übersicht 1. Aussagetest er...

Vues Render-Funktion

Inhaltsverzeichnis 1. Knoten, Bäume und virtuelle...

Lösung für IDEA, das keine Verbindung zur MySQL-Portnummernbelegung herstellen kann

Ich kann mich über die Befehlszeile ganz normal b...

Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger

Ich habe vor kurzem HTML neu gelernt, was als neue...

CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite

1. CSS-Schreibformat 1. Inline-Stile Sie können C...

Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper

Inhaltsverzeichnis 1. Einführung in Hochverfügbar...

So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren

Vorwort Um beim Testen die Fähigkeit des Projekts...

SQL-Implementierung von LeetCode (175. Zwei Tabellen verbinden)

[LeetCode] 175.Zwei Tabellen kombinieren Tabelle:...

Befehlsliste des Baota Linux-Panels

Inhaltsverzeichnis Pagoda installieren Management...