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

CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Artikel

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

Artikel

So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Artikel

Detailliertes Beispiel für sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation

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

CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Detailliertes Beispiel für sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation

Einige Hinweise zu MySQL-Routineberechtigungen

Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten

MySQL-Fall beim Gruppieren nach Beispiel

CSS implementiert den Texteingabefeldstil von Google Material Design (empfohlen)

Detailliertes Tutorial zum Minimieren der Installation der virtuellen CentOS 8.1-Maschine in VirtualBox

So bereinigen Sie Ihre Docker-Daten vollständig

Artikel empfehlen

Warum erscheinen ausgewählte @@session.tx_read_only in großen Mengen in der Datenbank?

MySQL-Datentabellenpartitionierungsstrategie und Vor- und Nachteileanalyse

Erfahrungsaustausch zur MySQL-Slave-Wartung

Detaillierte Erklärung der Listendarstellung von Vue

Detaillierte Schritte zur vollständigen Deinstallation und Neuinstallation von MySQL unter Windows 10

Teilen Sie 20 hervorragende Beispiele für Webformular-Design

MySQL-Fehlernummer 1129 – Lösung

Beispiel für die Implementierung eines Login-Effekts mit Vue-ElementUIs aus einem Formular

Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

Detaillierte Erläuterung der drei Methoden zum Abfangen von JS-Zeichenfolgen

Erste Schritte Tutorial für Anfänger: Domänennamenauflösung und Bindung

Lassen Sie uns über den Unterschied zwischen MyISAM und InnoDB sprechen

Erläuterung der Array-Verarbeitung in React und Redux

So konfigurieren Sie die Linux-Firewall und öffnen die Ports 80 und 3306

Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann