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

Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte

Das, was ich vorher geschrieben habe, ist zu komp...

Nginx-Lastausgleichskonfiguration, automatischer Umschaltmodus bei Ausfallzeiten

Streng genommen verfügt nginx nicht über eine Int...

Interpretation von syslogd- und syslog.conf-Dateien unter Linux

1: Einführung in syslog.conf Für verschiedene Uni...

Der Dienst für die dekomprimierte Version von MySQL 5.6 kann aufgrund des Systemfehlers 1067 nicht gestartet werden

Notieren Sie den Fehler, der mich heute den ganze...

Zusammenfassung der MySQL-Funktionsmethode LOAD_FILE()

In MySQL liest die Funktion LOAD_FILE() eine Date...

Tutorial zu HTML-Tabellen-Tags (27): Zell-Hintergrundbild-Attribut BACKGROUND

Wir können ein Hintergrundbild für die Zelle fest...

Detaillierte Erklärung der Meta-Tags (die Rolle der Meta-Tags)

Egal wie großartig Ihre persönliche Website ist, ...

So kopieren Sie eine MySQL-Tabelle

Inhaltsverzeichnis 1.mysqldump Ausführungsprozess...

Beispiele für die Verwendung von Docker und Docker-Compose

Docker ist eine Open-Source-Container-Engine, mit...

So zeigen Sie verfügbare Netzwerkschnittstellen in Linux an

Vorwort Die häufigste Aufgabe nach der Installati...

Grundlegende Schritte zur Sicherheitseinstellung für den CentOS7-Server

Schalten Sie den Ping-Scan aus, obwohl dies nicht...

js, um den Zahlungs-Countdown zu realisieren und zur Startseite zurückzukehren

Zahlungs-Countdown, um zur Startseite zurückzukeh...

So verhindern Sie, dass Website-Inhalte in Suchmaschinen aufgenommen werden

Normalerweise besteht das Ziel beim Erstellen ein...

Detaillierte Erklärung zur Verwendung von HTML-Header-Tags

HTML besteht aus zwei Teilen: Kopf und Text ** Da...

Lösung für gelegentliche Abstürze des Positionierungs-Hintergrunddienstes unter Linux

Problembeschreibung Im aktuellen Hintergrunddiens...