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

Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)

Als am häufigsten verwendetes Layoutelement spielt...

Lösen Sie das Problem des Yum-Installationsfehlers Geschützte Multilib-Versionen

Wenn ich heute nginx auf dem Cloud-Server install...

Kontinuierliche Bereitstellung mit Jenkins und Docker unter Docker

1. Was ist Continuous Delivery Der Ausgabeprozess...

Implementierung der Bereitstellung des Apollo-Konfigurationscenters mithilfe von Docker in CentOS7

Apollo Open Source-Adresse: https://github.com/ct...

Verwenden Sie „overflow: hidden“, um Seiten-Bildlaufleisten zu deaktivieren

Code kopieren Der Code lautet wie folgt: html { Ü...

Verschaffen Sie sich ein umfassendes Verständnis des Prototypobjekts in JavaScript

Inhaltsverzeichnis 1. Was ist ein Prototyp? 1.1 F...

So verwenden Sie nginx, um eine angegebene Schnittstelle (URL) zu blockieren

1. Einleitung Manchmal müssen Sie eine Servicesch...

Erstellen und Verwenden von Docker-Datenvolumencontainern

Ein Datenvolumencontainer ist ein Container, der ...

Implementierungsbeispiel für dynamische Routing-Breadcrumbs für Elemente

Zu meistern: localStorage, Komponentenkapselung Ä...

Implementieren Sie den Vollbildmodus und verlassen Sie den Vollbildmodus des Monitors in Vue

Inhaltsverzeichnis Vorwort: Implementierungsschri...

Aufbau einer Zookeeper-Standalone-Umgebung und einer Clusterumgebung

1. Aufbau einer Einzelmaschinenumgebung# 1.1 Heru...

Benutzerdefinierte Tabbar-Komponente für das WeChat-Applet

In diesem Artikel wird der spezifische Code der b...

So ändern Sie das Passwort in MySQL 5.7.18

So ändern Sie das Passwort in MySQL 5.7.18: 1. Fa...

So verwenden Sie die HTML-Formularattribute „schreibgeschützt“ und „deaktiviert“

1. readonly Nur-Lese-Attribut, so dass Sie den Wer...

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Vorwort Wenn beim kontinuierlichen Code-Delivery-...