JS realisiert einfachen Bildkarusselleffekt

JS realisiert einfachen Bildkarusselleffekt

In diesem Artikel wird der spezifische JS-Code zur Erzielung eines einfachen Bildkarusselleffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Ergebnisse erzielen

  • Mit den linken und rechten Schaltflächen können Sie das angezeigte Bild nach links und rechts verschieben, um ein nahtloses Scrollen zu ermöglichen
  • Klicken Sie auf den kleinen Kreis unten, um zum entsprechenden Bildindex zu springen
  • Wenn die oben genannten Vorgänge nicht ausgeführt werden, werden die Bilder automatisch gedreht.

HTML-Quellcode

<!DOCTYPE html>
<html lang="de">
<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>Karusselldiagramm</title>
    <link rel="stylesheet" href="./style.css" >
    <script src="./index.js"></script>
    <script src="./animate.js"></script>
</Kopf>

<Text>
    <div Klasse="Karussell_Box" id="Karussell-Box">
        <a href="javascript:;" Klasse="Pfeil-l">
            < </a>
                <a href="javascript:;" Klasse="arrow-r"> > </a>
                <ul Klasse="bewegen">
                    <li><img src="./images/xuezhong_1.jpg" alt=""></li>
                    <li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
                    <li><img src="./images/jianlai_3.jpg" alt=""></li>
                    <li><img src="./images/yichang_4.jpg" alt=""></li>
                </ul>
                <ol Klasse="Kreis">
                </ol>
    </div>
</body>

</html>

In einer großen Div-Box schweben in der Mitte zwei Schaltflächen, vier Bilder und darunter eine Reihe kleiner Kreise.

CSS Quellcode

*{
    Polsterung: 0;
    Rand: 0;
}

li {
    Listenstiltyp: keiner;
}

#Karussell-Box {
    Position: relativ;
    Breite: 700px;
    Höhe: 300px;
    Hintergrundfarbe: rosa;
    Rand: 100px automatisch;
    Überlauf: versteckt;
}

.Pfeil-l,.Pfeil-r {
    Anzeige: keine;
    Position: absolut;
    Breite: 24px;
    Höhe: 40px;
    oben: 50 %;
    Rand oben: -20px;
    Hintergrund: rgba(0, 0, 0, 0,3);
    Textausrichtung: zentriert;
    Zeilenhöhe: 40px;
    Farbe: #fff;
    Schriftgröße: 18px;
    Schriftfamilie: „icomoon“;
    Z-Index: 3;
}
.Pfeil-r {
    rechts: 0;
}

#Karussell-Box img{
    Breite: 700px;
    Höhe: 300px;
}

#Karussell-Box ul {
    Position: absolut;
    Breite: 1000 %;
}

#Karussell-Box ul li {
    schweben: links;
}

.Kreis {
    Position: absolut;
    unten: 10px;
    rechts: 10px;
}

.Kreis li {
    schweben: links;
    Breite: 8px;
    Höhe: 8px;
    Rand: 0,5px;
    Rand: 2px durchgezogen rgba(255, 255, 255, 0,5);
    Randradius: 50 %;
    Cursor: Zeiger;
    Z-Index: 9999;
}

.aktuell {
    Hintergrundfarbe: rosa;
}

JS-Quellcode

animate.js: Funktion zum Bewegen nach links und rechts auf der horizontalen Ebene

Funktion animieren(Objekt, Ziel, Rückruf) {
    Intervall löschen(Objekt.Timer);
    obj.timer = setzeIntervall(Funktion () {
        /* Bestimmen Sie, ob die Dezimalzahl positiv oder negativ ist, ob die größere oder kleinere Dezimalzahl verwendet werden soll*/
        var Schritt = (Ziel – Objekt.OffsetLeft) / 10;
        Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);

        wenn (Objekt.OffsetLeft == Ziel) {
            Intervall löschen(Objekt.Timer);
            Rückruf && Rückruf();
        }
        obj.style.left = obj.offsetLeft + Schritt + 'px';
    }, 15);
}

index.js

window.addEventListener('laden', Funktion () {
    var Karussell = document.querySelector('.carousel_box');
    var ul = document.querySelector('.move');
    var ol = document.querySelector('.circle');
    var carcouselWidth = Karussell.OffsetWidth;
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');

    karussell.addEventListener('mouseenter', funktion () {
        arrow_r.style.display = "Block";
        arrow_l.style.display = "Block";
        Intervall löschen(Timer);
        timer = null; // lösche die Timervariable })

    karussell.addEventListener('mouseleave', funktion () {
        arrow_r.style.display = "keine";
        arrow_l.style.display = "keine";
        Timer = Intervall festlegen(Funktion () {
            Pfeil_r.klick();
        }, 2000);
    })
    varnum = 0;
    var Kreis = 0;

    //Generiere entsprechende kleine Kreise entsprechend der Anzahl der Bilder for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);


        li.addEventListener('klicken', Funktion () {
            für (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            dieser.Klassenname = "aktuell";
            var n = this.getAttribute('index');
            Zahl = n;
            Kreis = n;
            animieren(ul, -n * Karussellbreite);
            konsole.log(n);
        })
    }

    ol.children[0].className = "aktuell";
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(erstes);

    varflag = wahr;


    /* Funktion Kreisänderung() {
        für (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[Kreis].className = "aktuell";
    } */


    arrow_r.addEventListener('klicken', Funktion () {

        wenn (Flagge) {
            Flagge = falsch;
            wenn (num == ul.children.length - 1) {
                ul.style.left = 0;
                Zahl = 0;
            }
            Zahl++;
            animieren(ul, -num * CarcouselWidth, Funktion () {
                Flagge = wahr;
            });
        }

        Kreis++;
        wenn (Kreis == ol.Kinder.Länge) {
            Kreis = 0;
        }

        Kreisänderung();
    })

    arrow_l.addEventListener('klicken', Funktion () {
        wenn (Flagge) {
            Flagge = falsch;
            wenn (num == 0) {
                Num = ul.children.length - 1;
                ul.style.left = -num * CarcouselWidth + 'px';

            }
            Nummer--;
            animieren(ul, -num * CarcouselWidth, Funktion () {
                Flagge = wahr;
            });

            Kreis--;
            Kreis = Kreis < 0? ol.children.length - 1 : Kreis;
            //Funktion circleChange() aufrufen;
        }
    });


    Funktion Kreisänderung() {

        für (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }

        ol.children[Kreis].className = "aktuell";
    }

    var Timer = Intervall festlegen(Funktion () {

        Pfeil_r.klick();
    }, 2000);

Erfahrung: Bei der JS-Implementierungsfunktion ist darauf zu achten, wie entsprechend der Anzahl der Bilder kleine Kreise generiert werden und ein nahtloses Scrollen ermöglicht wird.
Ungelöster Fehler: Nach mehrmaligem schnellen Klicken auf den kleinen Kreis zum Springen können der kleine Kreis und die Bildindexposition verwechselt werden. Auch das Klicken auf die linke und rechte Schaltfläche kann ähnliche Probleme verursachen.

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 zur Realisierung des Scrollrad-Karussellbildes
  • JS implementiert eine einfache automatische Bildrotation
  • Implementierungscode für das JS-Bildklick-Schalterkarussell
  • JavaScript, um den vollständigen Code des Karussellbildes zu erhalten
  • Native js realisiert das Klicken auf das Karussell zum Wechseln von Bildern
  • JavaScript zum Erzielen von Spezialeffekten mit Bildkarussells
  • Detaillierte Erklärung von sechs mit JavaScript implementierten Karusselleffekten für Webseitenbilder

<<:  Erstellen Sie einen stabilen und hochverfügbaren Cluster basierend auf MySQL + MyCat, Lastausgleich, Master-Slave-Replikation und Lese-/Schreibtrennung

>>:  Beispiel für das Einrichten einer Whitelist in Nginx mithilfe des Geomoduls

Artikel empfehlen

Praktischer grundlegender Beispielcode für den Linux-Befehl sed

Der Linux-Stream-Editor ist eine nützliche Möglic...

Komponentendesignspezifikationen für die Entwicklung von WeChat-Miniprogrammen

Designspezifikationen für WeChat Mini-Programmkom...

Eine kurze Erläuterung zur Verwendung des kartesischen Produktprinzips zum Abfragen mehrerer Tabellen in MySQL

MySQL-Mehrtabellenabfrage (kartesisches Produktpr...

Docker+Selenium-Methode zur Realisierung automatischer Gesundheitsberichte

In diesem Artikel wird das Gesundheitsmeldesystem...

Detaillierte Erläuterung der drei Möglichkeiten zum Schneiden von Catalina.out-Protokollen in Tomcat

1. Log4j zur Protokollsegmentierung 1) Bereiten S...

So beheben Sie das Timeout während des Pip-Vorgangs in Linux

So lösen Sie das Timeout-Problem, wenn Pip in Lin...

Tutorial zur Installation von Ubuntu 20.04 und NVIDIA-Treibern

Installieren Sie Ubuntu 20.04 Installieren Sie NV...

Eine kurze Diskussion über allgemeine Operationen von MySQL in cmd und Python

Umgebungskonfiguration 1: Installieren Sie MySQL ...

Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs

Beim Verwenden von Animation.css habe ich festges...

Ein seltener Fehler und eine Lösung für die vollständige SQL Server-Sicherung

1. Fehlerdetails Als ich einmal manuell eine voll...

Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text

Auslassungspunkte werden angezeigt, wenn mehrzeil...

Mehrere Möglichkeiten, Axios in Vue zu kapseln

Inhaltsverzeichnis Basisversion Schritt 1: Axios ...

Lebenszyklus und Hook-Funktionen in Vue

Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....

Implementierung von Nginx-Filterzugriffsprotokollen für statische Ressourcendateien

Unordentliches Protokoll Nginx wird im täglichen ...

Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu

Mittlerweile basieren die meisten Docker-Images a...