Verwenden von js, um den Effekt eines Karussells zu erzielen

Verwenden von js, um den Effekt eines Karussells zu erzielen

Lassen Sie uns heute darüber sprechen, wie Sie mit js den Effekt der Karussellkarte zu Ihrer Referenz erzielen. Der spezifische Inhalt ist wie folgt

Ideen

1. Zuerst müssen wir die Elemente besorgen, die wir brauchen

<div Klasse="alle" id="box">
        <div Klasse="Bildschirm">
            <!-- Ungeordnete Liste -->
            <ul> 
                <li><img src="./wf1.jpg" width="500" height="200" /></li>
                <li><img src="./wf2.jpg" width="500" height="200" /></li>
                <li><img src="./wf3.jpg" width="500" height="200" /></li>
                <li><img src="./wf4.jpg" width="500" height="200" /></li>
                <li><img src="./wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- Sortierte Liste -->
            <ol>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

2. Wir möchten, dass die Diashow überall dort ausgeführt wird, wo wir darauf klicken und ihre Farbe ändern

3. Fügen Sie dem Karussell linke und rechte Pfeiltasten hinzu, um nach oben und unten zu wechseln

4. Das Karussell von selbst in Bewegung setzen

arbeiten

1. Besorgen Sie sich zunächst die Elemente und Karusselleffekte, die Sie benötigen

1. Holen Sie sich zuerst die ul (Foto), ol (Klickfeld) und nth (linke und rechte Schaltflächen), die Sie benötigen.

var ul = document.querySelector('ul')
var ol = document.querySelector('ol')
var nth = document.querySelector('#arr')
var box = document.querySelector('#box')
var links = document.querySelector('#links')
var rechts = document.querySelector('#rechts')

2. Kapseln Sie den Animationseffekt ein, der später verwendet wird

 //Führen Sie eine Kapselung der Positionsanimation durch. Rufen Sie die Funktion animate(element,offset,setp,times){ auf.
                    // Löschen, wenn wahr, um mehrere Trigger zu verhindern if(element.jsq){
                        Intervall löschen(element.jsq)
                    }
                    // Den aktuellen Offset abrufen
                    var position = ul.offsetLeft
                    // Wenn die verschobene Position kleiner als die aktuelle Position ist, ist die Schrittlänge negativ if (Offset < Position) {
                        setp=-setp
                    }
                    // Starte den Lückentimer if(Math.abs(position-offset)>Math.abs(setp)){
                        element.jsq = setInterval(() => {
                        Position + = Sollwert
                        element.stil.links=position+'px'
                        // Wenn der aktuelle Positionswert innerhalb eines Schrittes der voreingestellten Position liegt, stoppen Sie den Timer, wenn (Math.abs(position-offset)<Math.abs(setp)){
                            Intervall löschen(element.jsq)
                            element.stil.links=Versatz+'px'
                        }
                    }, mal);
                    }
                }

Animationsschritte:

1. Überprüfen Sie beim Übergeben, ob ein Timer vorhanden ist. Wenn ja, löschen Sie ihn, um das gleichzeitige Vorhandensein mehrerer Timer zu verhindern.

2. Bestimmen Sie, ob die Position, zu der Sie sich bewegen möchten, größer als die ursprüngliche Position ist. Wenn sie größer ist, erhöht setp sie. Wenn sie kleiner ist, subtrahieren Sie jedes Mal die Schrittweite.

3. Starten Sie den Timer und bewegen Sie

4. Wenn der Abstand zwischen der aktuellen Position und der vorgegebenen Position kleiner als die Schrittlänge ist, endet der Timer und die Position wird auf die vorgegebene Position gesetzt, um wiederholte Seitwärtssprünge zu verhindern.

2.ol Inhalte hinzufügen, Klickereignisse hinzufügen, Bilder verschieben und Schaltflächenfarben ändern

für(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Für jedes li benutzerdefinierte Attribute festlegen li.setAttribute('a',i)
            ol.appendChild(li)
            // Setze ein Klickereignis für jedes li unter ol ol.children[i].onclick=function(){
                // Schleife, damit li exklusives Denken durchführt for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Füge dem aktuell angeklickten Element das Klassenattribut this.className='current' hinzu
                // Holen Sie sich den Wert des benutzerdefinierten Attributs des aktuell angeklickten LI, um zu sehen, welches angeklickt wurde. var index=this.getAttribute('a')
                konsole.log(index)
                // Überprüfen Sie die Breite jedes Fotos var imgwidth = ul.children[0].offsetWidth
                // Multiplizieren Sie die Breite mit der Anzahl der Frames, um den Bewegungsbetrag zu erhalten. Offset = Index * - Bildbreite
                //Rufen Sie die Animationsfunktion animate(ul,offset,50,30) auf.

1. Verwenden Sie eine For-Schleife, um die gleiche Anzahl von Schaltflächen wie Fotos zu erstellen. Verwenden Sie setAttribute('a', i), um ein neues benutzerdefiniertes Attribut zu erstellen und es zu ol hinzuzufügen. Sie werden es später brauchen.

für(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Für jedes li benutzerdefinierte Attribute festlegen li.setAttribute('a',i)
            ol.appendChild(li)
}

2. Fügen Sie allen Schaltflächen in dieser Schleife Bindungsereignisse hinzu, sodass die aktuelle Schaltfläche ihre Farbe ändert und die anderen keine Farbe haben. Exklusive Idee : Bei jedem Klicken hat die aktuelle Schaltfläche eine Farbe und die anderen werden gelöscht

für(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Für jedes li benutzerdefinierte Attribute festlegen li.setAttribute('a',i)
            ol.appendChild(li)
 
        //Neu// Setze ein Klickereignis für jedes li unter ol.children[i].onclick=function(){
                // Schleife, damit li exklusives Denken durchführt for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Füge dem aktuell angeklickten Element das Klassenattribut this.className='current' hinzu

3. Holen Sie sich den Wert des benutzerdefinierten Attributs des aktuell angeklickten Elements , speichern Sie ihn und verwenden Sie ihn, um den Versatz der Seite festzulegen . Multiplizieren Sie den aktuell angeklickten Wert mit jedem Foto, um den Versatz von ul zu erhalten . Denken Sie daran, ein Minuszeichen hinzuzufügen, da ul nach links verschoben werden soll, nicht ins Ansichtsfenster. Rufen Sie dann die Animationsfunktion auf, die wir zuvor geschrieben haben.

für(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Für jedes li benutzerdefinierte Attribute festlegen li.setAttribute('a',i)
            ol.appendChild(li)
            // Setze ein Klickereignis für jedes li unter ol ol.children[i].onclick=function(){
                // Schleife, damit li exklusives Denken durchführt for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Füge dem aktuell angeklickten Element das Klassenattribut this.className='current' hinzu
 
        //Neu// Holen Sie sich den Wert des benutzerdefinierten Attributs des aktuell angeklickten LI, um zu sehen, welches angeklickt ist. var index=this.getAttribute('a')
                konsole.log(index)
                // Überprüfen Sie die Breite jedes Fotos var imgwidth = ul.children[0].offsetWidth
                // Multiplizieren Sie die Breite mit der Anzahl der Frames, um den Bewegungsbetrag zu erhalten. Offset = Index * - Bildbreite
                //Rufen Sie die Animationsfunktion animate(ul,offset,50,30) auf.

Ergebnisse

3. Fügen Sie dem Karussell Schaltflächen „Zurück“ und „Weiter“ hinzu

(Den CSS-Stil werde ich hier nicht aufschreiben, ich werde ihn am Ende angeben. Stellen Sie ihn sich einfach zuerst vor. Das CSS ist am Anfang versteckt.)

1. Wir haben bereits zu Beginn verschiedene Elemente erhalten, daher müssen wir sie jetzt nicht mehr erhalten . Schreiben Sie einfach die Ereignisse für das Eintreten bzw. Verlassen.

// Maus betritt Ereignisfeld.onmousemove=function(){
        nth.style.display='Block'
    }   
    // Maus verlässt die Ereignisbox.onmouseleave=function(){
        nth.style.display='keine'
    }

2. Rufen Sie die aktuelle Seite ab , legen Sie das Klickereignis fest, „next ++ previous --“ und wenden Sie dann den vorherigen Onclick-Effekt an.

für(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Für jedes li benutzerdefinierte Attribute festlegen li.setAttribute('a',i)
            ol.appendChild(li)
            // Setze ein Klickereignis für jedes li unter ol ol.children[i].onclick=function(){
                // Schleife, damit li exklusives Denken durchführt for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Füge dem aktuell angeklickten Element das Klassenattribut this.className='current' hinzu
                // Holen Sie sich den Wert des benutzerdefinierten Attributs des aktuell angeklickten LI, um zu sehen, welches angeklickt ist. var index=this.getAttribute('a')
                konsole.log(index)
                // Überprüfen Sie die Breite jedes Fotos var imgwidth = ul.children[0].offsetWidth
                // Multiplizieren Sie die Breite mit der Anzahl der Frames, um den Bewegungsbetrag zu erhalten. Offset = Index * - Bildbreite
                //Rufen Sie die Animationsfunktion animate(ul,offset,50,30) auf.

                 // Neues // Klickereignis, Index ist der Wert des benutzerdefinierten Klassennamens der aktuell angeklickten Sequenz left.onclick=function(){
                wenn(index>0){
                    Index--
                }
                ol.Kinder[index].Klick()
                }
                rechts.beiKlick=Funktion(){
                
                    wenn(index<4){
                        Index++
                    }
                ol.Kinder[index].Klick()
                }
 
            }               
}

Da der Wert im Klickereignis nicht von außen abgerufen werden kann, schreibe ich einfach

Sie können Ereignisse auch in Ereignissen aufrufen, z. B. ol.children[index].click(). Denken Sie daran, Klammern hinzuzufügen und „on“ zu entfernen.

3. Wenn ol.onclick nicht ausgelöst wird (Nr. 1, 2, 3, 4, 5 unten wird angeklickt), funktioniert das Klicken nach links und rechts nicht, daher sollte dem Skript ein Codestück hinzugefügt werden

var Klick=0
 
    rechts.beiKlick=Funktion(){
        Klick++
        wenn(Klick==1){
          ol.children[1].klick()
        }
    }

An diesem Punkt ist der dritte Teil der Operation abgeschlossen.

4. Das Karussell von selbst in Bewegung setzen

// Automatische Bewegung // 1. Zuerst müssen wir dem ersten Button am Anfang Farbe hinzufügen ol.children[0].className='current'
    // 2. Starte den Timer und schalte alle 5 Sekunden um setInterval(function(){
        var position = ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var Indizes = Math.abs(Position/Bildbreite)
        //3. Hole die aktuelle Position und die Länge des Bildes und dividiere sie, um den Index zu erhalten if (indexes>3) {
            Indizes = -1
        }
        ol.children[index+1].click()
        // Achten Sie darauf, 1 hinzuzufügen, wenn Sie springen
        },5000)

1. Zuerst müssen wir dem ersten Button am Anfang Farbe hinzufügen und anschließend die exklusive Idee löschen.

2. Holen Sie sich den Index. Addieren Sie 1, um zu springen. Andernfalls springen Sie an Ort und Stelle. Der zweite Kreis beginnt bei -1, nicht bei 0, also sollte es +1 sein.

Wir können das gewünschte Ergebnis erzielen.

Gesamtcode

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <style type="text/css">
        * {
            Polsterung: 0;
            Rand: 0;
            Listenstil: keiner;
            Rand: 0;
        }
 
        .alle {
            Breite: 500px;
            Höhe: 200px;
            Polsterung: 7px;
            Rand: 1px durchgezogen #ccc;
            Rand: 100px automatisch;
            Position: relativ;
        }
 
        .Bildschirm {
            Breite: 500px;
            Höhe: 200px;
            Überlauf: versteckt;
            Position: relativ;
        }
 
        .Bildschirm li {
            Breite: 500px;
            Höhe: 200px;
            Überlauf: versteckt;
            schweben: links;
        }
 
        .Bildschirm ul {
            Position: absolut;
            links: 0;
            oben: 0px;
            Breite: 3000px;
        }
 
        .alles ol {
            Position: absolut;
            rechts: 10px;
            unten: 10px;
            Zeilenhöhe: 20px;
            Textausrichtung: zentriert;
        }
 
        .alles ol li {
            schweben: links;
            Breite: 20px;
            Höhe: 20px;
            Hintergrund: #fff;
            Rand: 1px durchgezogen #ccc;
            Rand links: 10px;
            Cursor: Zeiger;
        }
 
        .alle ol li.current {
            Hintergrund: gelb;
        }
 
        #arr {
            Anzeige: keine;
            Z-Index: 1000;
 
        }
 
        #arr Spanne {
            Breite: 40px;
            Höhe: 40px;
            Position: absolut;
            links: 5px;
            oben: 50 %;
            Rand oben: -20px;
            Hintergrund: #000;
            Cursor: Zeiger;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
            Schriftstärke: fett;
            Schriftfamilie: „fett“;
            Schriftgröße: 30px;
            Farbe: #fff;
            Deckkraft: 0,3;
            Rand: 1px durchgezogen #fff;
        }
 
        #arr #rechts {
            rechts: 5px;
            links: auto;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="alle" id="box">
        <div Klasse="Bildschirm">
            <!-- Ungeordnete Liste -->
            <ul> 
                <li><img src="./wf1.jpg" width="500" height="200" /></li>
                <li><img src="./wf2.jpg" width="500" height="200" /></li>
                <li><img src="./wf3.jpg" width="500" height="200" /></li>
                <li><img src="./wf4.jpg" width="500" height="200" /></li>
                <li><img src="./wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- Sortierte Liste -->
            <ol>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <Skript>
        //Führen Sie eine Kapselung der Positionsanimation durch. Rufen Sie die Funktion animate(element,offset,setp,times){ auf.
                    // Löschen, wenn wahr, um mehrere Trigger zu verhindern if(element.jsq){
                        Intervall löschen(element.jsq)
                    }
                    // Den aktuellen Offset abrufen
                    var position = ul.offsetLeft
                    // Wenn die verschobene Position kleiner als die aktuelle Position ist, ist die Schrittlänge negativ if (Offset < Position) {
                        setp=-setp
                    }
                    // Starte den Lückentimer if(Math.abs(position-offset)>Math.abs(setp)){
                        element.jsq = setInterval(() => {
                        Position + = Sollwert
                        element.stil.links=position+'px'
                        // Wenn der aktuelle Positionswert innerhalb eines Schrittes der voreingestellten Position liegt, stoppen Sie den Timer, wenn (Math.abs(position-offset)<Math.abs(setp)){
                            Intervall löschen(element.jsq)
                            element.stil.links=Versatz+'px'
                        }
                    }, mal);
                    }
                }
    // 1. Holen Sie sich das Element var ul = document.querySelector('ul')
    var ol = document.querySelector('ol')
    var nth = document.querySelector('#arr')
    var box = document.querySelector('#box')
    var links = document.querySelector('#links')
    var rechts = document.querySelector('#rechts')
    // 2. Klickelemente in ol hinzufügen // li in ol-Schleife hinzufügen
    für(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Für jedes li benutzerdefinierte Attribute festlegen li.setAttribute('a',i)
            ol.appendChild(li)
            // Setze ein Klickereignis für jedes li unter ol ol.children[i].onclick=function(){
                // Schleife, damit li exklusives Denken durchführt for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Füge dem aktuell angeklickten Element das Klassenattribut this.className='current' hinzu
                // Holen Sie sich den Wert des benutzerdefinierten Attributs des aktuell angeklickten LI, um zu sehen, welches angeklickt ist. var index=this.getAttribute('a')
                konsole.log(index)
                // Überprüfen Sie die Breite jedes Fotos var imgwidth = ul.children[0].offsetWidth
                // Multiplizieren Sie die Breite mit der Anzahl der Frames, um den Bewegungsbetrag zu erhalten. Offset = Index * - Bildbreite
                //Rufen Sie die Animationsfunktion animate(ul,offset,50,30) auf.
                // Klickereignis, Index ist der Wert des benutzerdefinierten Klassennamens der aktuell angeklickten Sequenznummer left.onclick=function(){
                wenn(index>0){
                    Index--
                }
                ol.Kinder[index].Klick()
                }
                rechts.beiKlick=Funktion(){
                
                    wenn(index<4){
                        Index++
                    }
                ol.Kinder[index].Klick()
                }
            }               
    }
 // Maus betritt Ereignisfeld.onmousemove=function(){
        nth.style.display='Block'
    }   
    // Maus verlässt die Ereignisbox.onmouseleave=function(){
        nth.style.display='keine'
    }
     //Maus-Rechtsklick-Ereignis var Click=0
 
    rechts.beiKlick=Funktion(){
 
        Klick++
 
        wenn(Klick==1){
 
          ol.children[1].klick()
 
        }
 
    }
 
    
 
// Automatische Bewegung // 1. Zuerst müssen wir dem ersten Button am Anfang Farbe hinzufügen ol.children[0].className='current'
    // 2. Starte den Timer und schalte alle 5 Sekunden um setInterval(function(){
        var position = ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var Indizes = Math.abs(Position/Bildbreite)
        //3. Hole die aktuelle Position und die Länge des Bildes und dividiere sie, um den Index zu erhalten if (indexes>3) {
            Indizes = -1
        }
        ol.children[index+1].click()
        // Achten Sie darauf, 1 hinzuzufügen, wenn Sie springen
        },5000)
    </Skript>
</body>
</html>

Denken Sie daran, den Pfad zum Bild zu ändern.

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 Implementierung eines einfachen Karusselldiagramms, umfassendste Codeanalyse (ES5)
  • Natives js zum Erreichen eines einfachen Karusselleffekts
  • Verwenden von JavaScript zum Implementieren von Karusselleffekten
  • Karusselleffekte mit JavaScript implementieren
  • js, um den kompletten Code des Karussells zu implementieren
  • Beispielcode zur Implementierung eines Karussells mit nativem JS
  • js, um den Effekt der Unterstützung des Karussell-Bildbeispiels mit Schiebeschalter für Mobiltelefone zu erzielen
  • Einfacher Code zur Implementierung eines JS-Karusselldiagramms
  • js, um zu erreichen, klicken Sie auf die linke und rechte Schaltfläche, um Bilder abzuspielen
  • JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)

<<:  Grundlegende MySQL-Tabellenabfragen – häufige Fehler beim Left-Join

>>:  MySQL-Triggersyntax und Anwendungsbeispiele

Artikel empfehlen

Detaillierte Erklärung der Rahmen- und Regelattribute der Tabelle in HTML

Die Rahmen- und Regelattribute des Tabellentags k...

Detaillierte Erklärung zur Verwendung der Stat-Funktion und des Stat-Befehls in Linux

stat-Funktion und stat-Befehl Erklärung von [inod...

So kapseln Sie Axios in ein Vue-Projekt (einheitliche Verwaltung von HTTP-Anfragen)

1. Voraussetzungen Bei der Entwicklung von Front-...

Implementieren eines Webplayers mit JavaScript

Heute zeige ich Ihnen, wie Sie mit JavaScript ein...

Vue implementiert die Lupenfunktion der Produktdetailseite

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

MySQL wählt die richtige Speicher-Engine

Wenn es um Datenbanken geht, ist eine der am häuf...

Reines CSS, um den Listen-Pulldown-Effekt auf der Seite zu erzielen

Möglicherweise sehen Sie häufig den folgenden Eff...

So verwenden Sie CSS-Zähler, um geordnete Zahlenlisten zu verschönern

Beim Webdesign ist es sehr wichtig, eine organisi...

Docker-Speicherüberwachung und Stresstestmethoden

Der ausgeführte Docker-Container zeigt, dass der ...

MySql fügt Daten erfolgreich ein, meldet aber [Err] 1055 Fehlerlösung

1. Frage: Ich habe in diesen Tagen Einfügevorgäng...

Win10 MySQL 5.6.35 Winx64 kostenlose Installationsversion Konfigurations-Tutorial

Tutorial zur kostenlosen Konfiguration der mysql ...

Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien

1. Einleitung Warum brauchen wir Indizes? In allg...

Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

Inhaltsverzeichnis 1. Vorbereitung vor der Entwic...

Detaillierte Erklärung der Docker Compose-Verwendung

Inhaltsverzeichnis Docker Compose-Nutzungsszenari...

Detaillierte Erklärung zur Verwendung von umask unter Linux

Ich habe vor Kurzem angefangen, Linux zu lernen. ...