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

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Docker

Docker installiert MySQL Version 8.0.20 zu Ihrer ...

Dockers Mechanismus zur Integritätserkennung

Für Container ist die einfachste Integritätsprüfu...

Detaillierte Analyse der Verwendungs- und Anwendungsszenarien von Slots in Vue

Was sind Slots? Wir wissen, dass in Vue nichts in...

So verwenden Sie Yum zum Konfigurieren der lnmp-Umgebung im CentOS7.6-System

1. Details zur Installationsversion Server: Maria...

Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig

Es gibt eine Interviewfrage, die Folgendes erforde...

Überwachen Sie die Größenänderung eines DOM-Elements über Iframe

Ein während des Entwicklungsprozesses häufig auft...

Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows

In diesem Artikel finden Sie eine ausführliche An...

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Wenn Sie den Eindruck haben, dass ein Problem mit...

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

Hier ist zu Ihrer Information eine Vue-Single-Sig...

So lösen Sie das Problem unzureichender Berechtigungen beim Benutzerwechsel im Docker-Container

Beim Benutzerwechsel im Docker-Container kommt di...

Lassen Sie uns über die Leistung von MySQLs COUNT(*) sprechen.

Vorwort Im Grunde verwenden Programmierer am Arbe...

MySQL-Wissenspunkte und häufig verwendete MySQL-Befehle für die Computerprüfung der zweiten Ebene

Die Grundlagen der MySQL-Wissenspunkte für die Co...

Tiefgreifendes Verständnis des Statusübergangs des MySQL-Master-Slave-Replikationsthreads

Vorwort Das Grundprinzip der MySQL-Master-Slave-R...

Lösung zur Installation von Vim im Docker-Container

Inhaltsverzeichnis Der Anfang der Geschichte Inst...

jQuery zum Erreichen des Sperrfeuereffekts

In diesem Artikel wird der spezifische Code von j...