Sehr detaillierte JavaScript-Implementierung eines Webseiten-Karussells

Sehr detaillierte JavaScript-Implementierung eines Webseiten-Karussells

Vorwort:

Auf Webseiten sehen wir oft verschiedene Karusselleffekte. Wie werden sie erzielt? Schauen wir es uns heute gemeinsam an! Zuerst müssen wir mehrere Bilder vorbereiten. Hier habe ich fünf Bilder vorbereitet.

Funktionale Anforderungen:

  • Wenn die Maus über das Karussellmodul fährt, werden die linken und rechten Schaltflächen angezeigt, und wenn sie das Modul verlässt, werden die linken und rechten Schaltflächen ausgeblendet.
  • Klicken Sie einmal auf die Schaltfläche rechts, und das Bild wird links abgespielt, und so weiter, dasselbe gilt für die Schaltfläche links.
  • Während das Bild abgespielt wird, verändert sich das kleine Kreismodul darunter entsprechend.
  • Klicken Sie auf den kleinen Kreis, um das entsprechende Bild abzuspielen.
  • Das Karussell spielt automatisch Bilder ab, auch wenn die Maus nicht über das Karussell fährt.
  • Beim Überfahren des Karussellmoduls mit der Maus wird die automatische Wiedergabe gestoppt.

Unser Seitenaufbau sieht wie folgt aus:

Als nächstes werden wir die Funktionen Schritt für Schritt implementieren

Erstellen von HTML-Seiten

Der Implementierungsprozess ist wie folgt: Geben Sie zuerst ein großes Kästchen an und weisen Sie ihm dann eine relative Position zu, um den Positionierungsvorgang der nachfolgenden Kästchen zu erleichtern. Fügen Sie die Bilder in Form einer ungeordneten Liste zum großen Kästchen hinzu. Da der Karusselleffekt, den wir erzielen möchten, horizontal ist, können wir dem Bild das Attribut float: left hinzufügen. Da die UL, in der sich das Bild befindet, nicht groß genug ist, werden andere Bilder darunter gequetscht. Daher können wir die Größe der UL, in der sich das Bild befindet, manuell ändern. Schreiben Sie als Nächstes eine ungeordnete Liste, um kleine Kreise zu platzieren, und positionieren Sie sie durch absolute Positionierung unterhalb des großen Kästchens. Fügen Sie dann die kleinen Kreise hinzu, um uns den Effekt zu erleichtern, dass wir durch Klicken auf den entsprechenden kleinen Kreis zum entsprechenden Bild springen. Verwenden Sie dann die absolute Positionierung, um die linken und rechten Pfeile an den entsprechenden Positionen auf beiden Seiten der großen Box zu positionieren. Schließlich verstecken wir den Inhalt außerhalb der großen Box.

<!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>Dokument</title>
    <link rel="stylesheet" href="index.css" rel="externes nofollow" >
</Kopf>
<Text>
    <div Klasse="Box">
        <a href="" Klasse = 'links jiantou'>&lt;</a>
        <a href="" Klasse = 'rechts jiantou'>&gt;</a>
        <ul-Klasse = "Bild">
            <li>
                <a href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" ><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" ><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" ><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" ><img src="./images/4.jpg" alt=""></a>
            </li>
             <li>
                <a href="#" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" ><img src="./images/5.jpg" alt=""></a>
            </li>
        </ul>
        <ul Klasse="lis">
            <li></li>
            <li Klasse = 'ausgewählt'></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

CSS-Datei

*{
    Rand: 0;
    Polsterung: 0;
}
li{
    Listenstil: keiner;
}
.Kasten{
    Position: relativ;
    Überlauf: versteckt;
    Rand: 100px automatisch;
    Breite: 520px;
    Höhe: 280px;
    Hintergrundfarbe: rot;
}
.jiantou{
    Schriftgröße: 24px;
    Textdekoration: keine;
    Anzeige: Block;
    Textausrichtung: zentriert;
    Breite: 20px;
    Höhe: 30px;
    Zeilenhöhe: 30px;
    Hintergrund: rgba (158, 154, 154, 0,7);
    Farbe: weiß;
    Z-Index: 999;
}
.links{
    Position: absolut;
    oben: 125px;
    links: 0px;
    Rahmen oben rechts – Radius: 15px;
    Rahmen unten rechts – Radius: 15px;
}
.Rechts{
    Position: absolut;
    oben: 125px;
    links: 500px;
    Rahmen oben links – Radius: 15px;
    Rahmen unten links – Radius: 15px;
}
img{
    Breite: 520px;
    Höhe: 280px;
}
.box .bild{
    Breite: 600 %;
}
.Bild li {
    schweben: links;
}
.lis{
   Position: absolut;
   unten: 15px;
   links: 50%;
   Rand links: -35px;
   Breite: 70px;
   Höhe: 13px;
   Rahmenradius: 7px; 
   Hintergrund: rgba (158, 154, 154, 0,7);
}
.lis li {
    schweben: links;
    Breite: 8px;
    Höhe: 8px;
    Rand: 3px;
    Randradius: 50 %;
    Hintergrundfarbe: #fff;
   
}
.lis .ausgewählt{
    Hintergrundfarbe: Cyan;
}

Der Seiteneffekt ist jetzt:

Implementieren Sie die Funktionen des js-Teils

1. Linke und rechte Tasten

Beim Überfahren des Karussellmoduls mit der Maus werden der linke und der rechte Button eingeblendet, beim Verlassen des Moduls werden der linke und der rechte Button ausgeblendet.

Zuerst verwenden wir display:none , um die beiden anfänglichen Pfeile auszublenden. Dann holen wir die beiden Pfeile und das große Kästchen und fügen dem großen Kästchen Mouseover- und MouseLeave-Ereignisse hinzu.

Wie unten dargestellt:

 var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('Mauseingabe',Funktion(){
        links.Stil.Anzeige = "Block";
        rechts.Stil.Anzeige = "Block";
    })
    box.addEventListener('mouseleave',Funktion(){
        linke.Stil.Anzeige = "keine";
        rechts.Stil.Anzeige = "keine";
    })

Der Effekt ist:

2. Dynamisch kleine Kreise erzeugen

Löschen Sie zuerst alle kleinen Kreise li, wie in der Abbildung gezeigt:

Da die Anzahl der von uns erstellten kleinen Kreise von der Anzahl der Bilder abhängt, lautet unsere Kernidee: Die Anzahl der kleinen Kreise sollte mit der Anzahl der Bilder übereinstimmen. Holen Sie sich zuerst die Anzahl der Bilder in ul (die Bilder werden in li platziert, also ist es die Anzahl von li) und verwenden Sie dann die Schleife, um Knoten createElement ('li') dynamisch zu erstellen und Knoten ul. appendChild(li) generiert kleine Kreise (dieser kleine Kreis sollte in ul platziert werden). Beachten Sie, dass dem ersten kleinen Kreis die ausgewählte Klasse hinzugefügt werden muss.

Der Implementierungscode lautet:

var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    für(var i = 0;i<pic.children.length;i++){
        var li = document.createElement('li');
        lis.appendChild(li);
    }
    lis.children[0].className = 'ausgewählt';

Der Effekt ist:

3. Klicken Sie auf den kleinen Kreis und er ändert seine Farbe.

Fügen Sie beim Generieren des kleinen Kreises basierend auf der exklusiven Idee Klickereignisse zu den kleinen Kreisen hinzu. Wenn auf den entsprechenden kleinen Kreis geklickt wird, fügen Sie ihm die selected Klasse hinzu und löschen Sie selected Klasse aus den verbleibenden kleinen Kreisen.

Der Code lautet:

li.addEventListener('klicken',Funktion(){
            für(var i =0;i<lis.children.length;i++){
                lis.childern[i].className = '';
            }
            this.className = "ausgewählt";
        })

Der Effekt ist:

4. Klicken Sie auf den kleinen Kreis, um das Bild zu scrollen

Hier wird die Animationsfunktion verwendet. Ich habe bereits darüber gesprochen, wie die Animationsfunktion gekapselt wird. Ich werde es hier nicht wiederholen und es direkt zitieren. Achten Sie aber darauf, die js-Datei der Animationsfunktion über unserer index.js zu platzieren. Und da die Animationsfunktion erst verwendet werden kann, nachdem die positionierten Elemente hinzugefügt wurden, müssen wir dem Bild-UL auch eine Positionierung hinzufügen. Dann haben wir gemäß der Regel festgestellt, dass beim Klicken auf einen kleinen Kreis die Scroll-Distanz von ul gleich der Indexnummer des kleinen Kreises multipliziert mit der Breite des Bildes ist. (Da das Bild nach links geht, ist es ein negativer Wert.) Wir müssen also die Indexnummer des kleinen Kreises kennen. Wir können beim Generieren des kleinen Kreises ein benutzerdefiniertes Attribut dafür festlegen und dieses benutzerdefinierte Attribut abrufen, wenn wir darauf klicken.

Legen Sie beim Generieren von li zuerst den Index fest:

li.setAttribute('index',i);

Wenn Sie dann ein Klickereignis zu li hinzufügen, holen Sie sich den Index, holen Sie sich die Bildbreite und rufen Sie die Animationsfunktion auf:

li.addEventListener('klicken',Funktion(){
    var boxWidth = box.offsetWidth;
    //Indexnummer abrufen var index = this.getAttribute('index');
    für(var i = 0;i<lis.children.length;i++){
        lis.children[i].className = '';
    }
    this.className = "ausgewählt";
    animieren(Bild, -index*Boxbreite)
})

Der Effekt ist:

5. Klicken Sie einmal auf die Schaltfläche rechts, um jeweils ein Bild durchzublättern.

Sie können der rechten Schaltfläche direkt ein Klickereignis hinzufügen, eine Variable num deklarieren, einmal darauf klicken und sie um 1 erhöhen. Multiplizieren Sie diese Variable mit der Breite des Bildes, die der Bildlaufdistanz von ul entspricht.

varnum = 0;
    right.addEventListener('klicken',function(){
        Zahl++;
        animieren(Bild, -Num*Boxbreite);
    })

Der Effekt ist:

Wir haben festgestellt, dass beim Klicken auf die Schaltfläche rechts der Bildwechseleffekt erzielt werden kann. Wenn Sie jedoch auf das letzte Bild klicken, bleibt es auf dem ursprünglichen Hintergrund der Anzeigeseite, was nicht schön ist. Daher können wir das Prinzip des nahtlosen Bildlaufs verwenden, um die Bilder nahtlos zu scrollen. Die Vorgehensweise ist wie folgt. Fügen Sie mit cloneNode(true) eine Kopie des ersten li in der pic Liste hinzu und kopieren Sie es dann mit appendChild() an das Ende der Liste. Fügen Sie dann auf der js-Seite eine Beurteilungsbedingung zu num hinzu, d. h., wenn der Wert von num gleich der Anzahl der Elemente in dieser Liste - 1 ist, lassen Sie die von ul zurückgelegte Distanz 0 werden und lassen Sie num gleich 0 sein.

Der Code lautet:

var erste = Bild.Kinder[0].cloneNode(true);
    pic.appendChild(erstes);
    //Funktion der rechten Taste var num = 0;
    right.addEventListener('klicken',function(){
        wenn(Anzahl == Bild.Kinder.Länge-1){
            Bildstil.links = 0;
            Zahl = 0;
        }
        Zahl++;
        animieren(Bild, -Num*Boxbreite);
    })

Der Effekt ist:

Erfolgreich geschafft.

6. Klicken Sie auf die Schaltfläche rechts. Der kleine Kreis ändert sich entsprechend.

Folgendes muss getan werden: Deklarieren Sie einen weiteren Variablenkreis und erhöhen Sie ihn bei jedem Klicken auf die rechte Schaltfläche um 1, da dieser Effekt auch erzielt wird, wenn wir auf die linke Schaltfläche klicken, und diese Variable auch benötigt wird. Daher muss eine globale Variable deklariert werden. Es gibt jedoch 5 Bilder und wir haben nur 4 kleine Kreise, einen weniger, daher müssen wir eine Beurteilungsbedingung hinzufügen. Wenn Kreis == 4, wird er auf 0 zurückgesetzt.

 varnum = 0;
var Kreis = 0;
  right.addEventListener('klicken',function(){
      wenn(Anzahl == Bild.Kinder.Länge-1){
          Bildstil.links = 0;
          Zahl = 0;
      }
      Zahl++;
      animieren(Bild, -Num*Boxbreite);
      Kreis++;
      wenn(Kreis == lis.Kinder.Länge){
          Kreis = 0;
      }
      für(var i =0;i<lis.children.length;i++){
          lis.children[i].className = '';
      }
      lis.children[Kreis].className = "ausgewählt";
  })

Die laufenden Ergebnisse sind:

Es gibt jedoch noch einige kleine Probleme. Wenn wir den kleinen Kreis mit der Schaltfläche rechts kombinieren, wird ein Fehler wie folgt angezeigt:

Wenn wir auf die kleinen Punkte klicken, können wir zwar auch auf die entsprechende Bilderseite springen, aber wenn wir weiter auf den Button rechts klicken, stellen wir fest, dass die kleinen Punkte darunter nicht den entsprechenden Bildern entsprechen. Dies wird durch die Variable num gesteuert, wenn wir auf die rechte Schaltfläche klicken, und die Variable num hat nichts mit dem Klickereignis des kleinen Kreises zu tun, daher besteht ein Unterschied.
Unsere Lösung besteht darin, bei jedem Klicken auf das kleine li die Indexnummer abzurufen und dann die Werte von num und circle in die Werte der erhaltenen Indexnummer zu ändern. Der Code lautet:

var index = this.getAttribute('index');
Zahl = Index;
Kreis = Index;

Der Effekt ist:

7. Funktionserstellung der linken Taste

Die Methode ähnelt der des Buttons rechts, daher gehe ich nicht näher darauf ein. Der Code lautet wie folgt:

left.addEventListener('klicken',function(){
        wenn(Zahl == 0){
            Num = Bild.Kinder.Länge-1;
            Bildstil.links = -num*Boxbreite+'px';
            
        }
        Nummer--;
        animieren(Bild, -Num*Boxbreite);
        Kreis--;
        wenn(Kreis <0){
            Kreis = lis.Kinder.Länge-1;
        }
        für(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[Kreis].className = "ausgewählt";
    })

Der Effekt ist:

8. Autoplay-Funktion

Tatsächlich ist das Hinzufügen eines Timers zum automatischen Abspielen des Karussells ähnlich wie das Klicken auf die Schaltfläche rechts. Zu diesem Zeitpunkt verwenden wir den manuellen Aufruf des Klickereignisses right.click(), Der Timer stoppt, wenn die Maus über das Bild fährt, und startet, wenn die Maus das Bild verlässt.

var Timer = this.setInterval(Funktion(){
  rechtsklick();
 },2000)

Der Effekt ist:

Der vollständige index.js-Code lautet:

window.addEventListener('laden',Funktion(){
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('Mauseingabe',Funktion(){
        links.Stil.Anzeige = "Block";
        rechts.Stil.Anzeige = "Block";
    })
    box.addEventListener('mouseleave',Funktion(){
        linke.Stil.Anzeige = "keine";
        rechts.Stil.Anzeige = "keine";
    })
    var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    var boxWidth = box.offsetWidth;
    für(var i = 0;i<pic.children.length;i++){
        
        var li = document.createElement('li');
        lis.appendChild(li);
        //Indexnummer festlegen li.setAttribute('index',i);
        li.addEventListener('klicken',Funktion(){
            //Indexnummer abrufen var index = this.getAttribute('index');
            Zahl = Index;
            Kreis = Index;
            für(var i = 0;i<lis.children.length;i++){
                lis.children[i].className = '';
            }
            this.className = "ausgewählt";
            animieren(Bild, -index*Boxbreite)
        })
    }
    lis.children[0].className = 'ausgewählt';
    //Klonen Sie das erste li
    var erste = Bild.Kinder[0].cloneNode(true);
    pic.appendChild(erstes);
    varnum = 0;
    var Kreis = 0;
    //Funktion der rechten Tasteright.addEventListener('click',function(){
        wenn(Anzahl == Bild.Kinder.Länge-1){
            Bildstil.links = 0;
            Zahl = 0;
        }
        Zahl++;
        animieren(Bild, -Num*Boxbreite);
        Kreis++;
        wenn(Kreis == lis.Kinder.Länge){
            Kreis = 0;
        }
        für(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[Kreis].className = "ausgewählt";
    })
    //Funktion der linken Taste left.addEventListener('click',function(){
        wenn(Zahl == 0){
            Num = Bild.Kinder.Länge-1;
            Bildstil.links = -num*Boxbreite+'px';
            
        }
        Nummer--;
        animieren(Bild, -Num*Boxbreite);
        Kreis--;
        wenn(Kreis <0){
            Kreis = lis.Kinder.Länge-1;
        }
        für(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[Kreis].className = "ausgewählt";
    })
    var Timer = this.setInterval(Funktion(){
        rechtsklick();
    },2000)
})

Dies ist das Ende dieses Artikels über die äußerst detaillierte Implementierung eines Webseitenkarussells mit JavaScript. Weitere relevante Inhalte zur Implementierung eines Webseitenkarussells mit JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Über die Implementierung des JavaScript-Karussells
  • JS-Implementierung eines Karussellbeispiels
  • 3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen
  • Reines js, um den Effekt eines Karussells zu erzielen
  • Natives JS zur Implementierung eines atmenden Karussells
  • Verwenden von JavaScript zum Implementieren von Karusselleffekten

<<:  Einführung in die Verwendung sowie Vor- und Nachteile von MySQL-Triggern

>>:  Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

Artikel empfehlen

Überlegungen zur Partitionierung von MySQL-Datenbanktabellen [empfohlen]

Die Tabellenpartitionierung unterscheidet sich vo...

So stellen Sie ein Linux-System automatisch mit PXE bereit

Inhaltsverzeichnis Hintergrund DHCP konfigurieren...

CSS-Techniken zum Erreichen eines mehrspaltigen Layouts gleicher Höhe, das das Frontend beherrschen sollte

1. Einleitung Beim Schreiben einer Seite stoßen w...

jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Cod...

Tutorial zur grundlegenden Syntax von js und zur Konfiguration von Maven-Projekten

Inhaltsverzeichnis 1. js-Anweisung Zweitens js-Ar...

So verwenden Sie den Flat Style zum Gestalten von Websites

Das Wesen einer flachen Website-Struktur liegt in...

Einfaches Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios

Einfaches Beispiel für die Verschönerung von HTML...

Detaillierte Erläuterung der MySQL SQL-Anweisungsanalyse und Abfrageoptimierung

So erhalten Sie SQL-Anweisungen mit Leistungsprob...

Spezielle Befehle in der MySql-Datenbankabfrage

Erstens: Installation von MySQL Laden Sie die MyS...

Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels

Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...

So ändern Sie das Root-Benutzerkennwort in MySQL 8.0.16, WinX64 und Linux

Grundlegende Vorgänge wie die Verbindung zur Date...

CSS-Code zum Erstellen von 10 modernen Layouts

Vorwort Ich habe mir am Sonntag zu Hause das drei...

Detailliertes Tutorial zur Installation und Deinstallation von MySql

In diesem Artikel finden Sie das Tutorial zur Ins...

Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung

Gründe, warum die 1px-Linie dicker wird Wenn wir ...

Installieren Sie CentOS7 in VMware (legen Sie eine statische IP-Adresse fest) und installieren Sie die MySQL-Datenbank über den Docker-Container (sehr ausführliches Tutorial).

Ein Student im zweiten Studienjahr fragte mich, w...