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

Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js

Nachfrage: Diese Nachfrage ist ein dringender Bed...

Detailliertes grafisches Tutorial zur stillen Installation von Oracle 12.2 auf CentOS unter VMware

Umweltvorbereitung: VMware+CentOS, jdk 1. Überprü...

Einige Erkenntnisse und Gedanken zu iframe

Diese Geschichte beginnt heute mit einer unerwarte...

Detaillierte Erläuterung des Dockerfiles zum Erstellen eines benutzerdefinierten Docker-Images und Vergleich der CMD- und ENTRYPOINT-Anweisungen

1. Übersicht Es gibt drei Möglichkeiten, ein Dock...

Detaillierte Erklärung zum Erstellen geplanter MySql-Aufgaben in Navicat

Detaillierte Erklärung zum Erstellen geplanter My...

Zeigt Ihnen, wie Sie das Linux-Subsystem von Win10 aktivieren (mit detaillierten Bildern und Text)

Heute werde ich Ihnen zeigen, wie Sie das Linux-S...

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Dieser Artikel dient lediglich der Erinnerung an ...

Ein praktisches Tutorial zum Erstellen einer vollständig verteilten Hadoop-Umgebung unter Ubuntu 16.4

Vorwort In diesem Artikel werden hauptsächlich di...

Detaillierte Erklärung des Codes zum Abfragen von Daten eines bestimmten Tages, Monats oder Jahres in MySQL

Heute Wählen Sie * aus Tabellenname, wobei to_day...

JS implementiert ein zufälliges Namensaufrufsystem

Verwenden Sie JS, um ein zufälliges Namensaufrufs...

Installieren von MySQL 8.0.12 basierend auf Windows

Dieses Tutorial ist nur auf Windows-Systemen anwe...

Windows 2019 Aktivierungs-Tutorial (Office2019)

Vor ein paar Tagen habe ich erfahren, dass die of...

So schreiben Sie eine Node.JS-Version eines Spiels

Inhaltsverzeichnis Überblick Build-Prozess Verwan...

Methoden und Schritte zur Verwendung von http-Proxy-Middleware zur domänenübergreifenden Implementierung von Proxy in Node

Inhaltsverzeichnis 1. Installieren Sie das Proxy-...

Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)

Frage Als ich heute eine Projektfunktion schrieb,...