Detaillierte Erklärung von sechs mit JavaScript implementierten Karusselleffekten für Webseitenbilder

Detaillierte Erklärung von sechs mit JavaScript implementierten Karusselleffekten für Webseitenbilder

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 Sie zuerst eine HTML-Seite

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 dann die Funktionen des js-Teils.

1. Wenn die Maus über das Karussellmodul fährt, werden die linken und rechten Schaltflächen angezeigt, und beim Verlassen des Moduls werden die linken und rechten Schaltflächen 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 muss 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 einzufügen. appendChild(li), um kleine Kreise zu generieren (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 ausgewählte Klasse hinzu und löschen Sie die ausgewählte 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 über cloneNode (true) eine Kopie des ersten li in der .pic-Liste hinzu und kopieren Sie es dann über 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 rechten Schaltfläche. 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)
})

Bisher wurden alle Funktionen unseres Karussells realisiert. Hast du es gelernt? 

Oben finden Sie den ausführlichen Inhalt der detaillierten Erklärung, wie Sie mit JavaScript sechs Arten von Bildkarusselleffekten für Webseiten erzielen. Weitere Informationen zum Bildkarussell für Webseiten in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • JS realisiert einfachen Bildkarusselleffekt
  • 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

<<:  Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

>>:  Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS

Artikel empfehlen

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Manchmal ist es schön, ein paar nette Scrollbar-E...

So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen

Vorne geschrieben Ich weiß nicht, wer als Erster ...

MySQL-Prozesssteuerung: IF()-, IFNULL()-, NULLIF()-, ISNULL()-Funktionen

In MySQL können Sie die Funktionen IF(), IFNULL()...

37 Tipps für ein gutes User Interface Design (mit Bildern)

1. Versuchen Sie, ein einspaltiges statt eines meh...

Beispielcode zum Bereitstellen von ELK mit Docker-Compose

Umfeld Host-IP 192.168.0.9 Docker-Version 19.03.2...

Detaillierte Erklärung der KeepAlive-Anwendungsfälle in Vue

Bei der Entwicklung ist es häufig erforderlich, d...

Praktischer Bericht zur Lösung des MySQL Deep Paging-Problems

Inhaltsverzeichnis Vorwort Warum wird Limit Deep ...

Herausforderung des HTML-Symbol-zu-Entity-Algorithmus

Herausforderung: Wandelt die Zeichen &, <,...

So kompilieren Sie Nginx neu und fügen Module hinzu

Beim Kompilieren und Installieren von Nginx werde...

Standardmäßige Stilanordnung von HTML4.0-Elementen

Code kopieren Der Code lautet wie folgt: html, Ad...

Beispiele für die Verwendung von pessimistischem und optimistischem Sperren in MySQL

Pessimistische Sperre Pessimistische Sperre, betr...

Installations-Tutorial zur neuesten stabilen Version von MySQL 5.7.17 unter Linux

Installieren Sie die neueste stabile Version von ...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

Aufrufen und Ausführen von Host-Docker-Operationen im Docker-Container

Zunächst einmal ist dieser Beitrag Docker-Neuling...

CSS-Implementierungscode für die Textausrichtung

Beim Erstellen von Formularen kommt es häufig vor...