3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen

In diesem Artikel werden 3 Methoden beschrieben, mit denen Sie den spezifischen Code des JS-Karusselleffekts zu Ihrer Information erreichen können. Der spezifische Inhalt ist wie folgt

Js implementiert Karussellbild 01

Umsetzungsideen

Dies ist möglicherweise eine der einfachsten Implementierungen eines Karussells. Dieser Effekt wird durch Ändern der Quelle des Bildes erreicht. Zuerst müssen Sie das Bildbenennungsformat vereinheitlichen, z. B. pic01.jpg, pic02.jpg ..., und dann mithilfe von js einen Timer verwenden, um den Namen des Quellbildlinks im img-Tag zu ändern und den Umschalteffekt zu erzielen. Der Code lautet wie folgt:

Ergebnisse erzielen

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Karussell-Implementierung 01</title>
  <style type="text/css">
   .lunbo{
    Breite: 900px;
    Höhe: 400px;
    Rand: 100px automatisch;
   }
   .lunbo img{
    Breite: 100 %;
    Höhe: 100 %;
   }
  </Stil>
 </Kopf>
 <Text>
  <!--Diashow-Modul-->
  <div Klasse="lunbo">
   <img id="lunbo_img" src="./pic/img3.jpeg" >
  </div>
  <!-- JS-Code -->
    <Skript>
      Var-Index = 1;
        Funktion lunbo(){
            Index ++;
            //Überprüfen, ob der Index größer als 3 ist
            wenn(index > 3){
                Index = 1;
            }
            //Img-Objekt abrufen var img = document.getElementById("lunbo_img");
            img.src = "./pic/img"+index+".jpeg";
        }
        //2. Definieren Sie den Timer setInterval(lunbo,2000);
        /*Denken Sie daran, dass Sie beim Aufrufen der lunbo-Methode im Timer nicht add(), setInterval(lunbo,2000) verwenden können. Wenn Sie add() verwenden, wird die lunbo()-Methode ausgeführt, wodurch der Timer unbrauchbar wird.
 </Skript>
 </body>
</html>

Js realisiert Karussellbild 02

Umsetzungsideen

Dies ist möglicherweise eine der einfachsten Implementierungen eines Karussells. Dieser Effekt wird durch Ändern des Hintergrundbildlinks erreicht. Zuerst müssen Sie das Bildbenennungsformat vereinheitlichen, z. B. pic01.jpg, pic02.jpg ..., und dann mithilfe von js einen Timer verwenden, um den Namen des url () -Bildlinks im Hintergrundattribut zu ändern, um den Umschalteffekt zu erzielen. Der Code lautet wie folgt:

Ergebnisse erzielen

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Karussell-Implementierung 02</title>
  <Stil>
   Körper{
    Rand: 0;
    Polsterung: 0;
   }
   .lunbo{
    Breite: 100 %;
    Höhe: 720px;
    Hintergrundbild: URL (Bild/Bild1.jpeg);/*Hintergrundbild*/
    Hintergrundgröße: 100 % 100 %; 
   }
  </Stil>
 </Kopf>
 <Text>
  <div Klasse="lunbo">
   
  </div>
  <Skripttyp="text/javascript">
    Var-Index = 1;
   Funktion lunbo(){
    Index ++;
    //Überprüfen, ob die Zahl größer als 3 ist
    wenn(index > 3){
     Index = 1;
    }
    //Img-Objekt abrufen var img = document.getElementsByClassName("lunbo")[0];
  img.style.background = "url(Bild/Bild"+Index+".jpeg)";
  img.style.backgroundSize="100% 100%"; 
   }
   //2. Definieren Sie den Timer setInterval(lunbo,3000);
  </Skript>
 </body>
</html>

Js implementiert Karussellbild 03

Um dieses Karussell zu implementieren, verwenden Sie zuerst CSS-Code, um das Opazitätsattribut aller li-Tags, die Bilder speichern, auf 0 zu setzen, um sie auszublenden. Verwenden Sie JS-Code, um mithilfe eines Timers die Klasse „active“ kontinuierlich aufzurufen, um die li-Tags hervorzuheben und gleichzeitig die zugehörigen li-Tags auszublenden. Verwenden Sie dann index++, um den Effekt des Umschaltens der zyklischen Anzeige zu erzielen. Wenn auf die Schaltflächen auf beiden Seiten geklickt wird, wird die Methode aufgerufen, in der sich index++ befindet, um den Umschalteffekt zu erzielen. Es gibt keinen komplizierten Algorithmus. Sie können ihn lernen, indem Sie sich den Code mit ein wenig Grundwissen ansehen. Bitte beziehen Sie sich darauf.

Ergebnisse erzielen

HTML Code

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1,
  Mindestmaßstab=1, Höchstmaßstab=1, benutzerdefiniert skalierbar=nein" />
  <!--CSS-Code einführen-->
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
  <!--Js-Code einführen-->
  <script src="./js/index.js"></script>
  <title>Js implementiert Karussellbild</title>
 </Kopf>
 <Text>
  <div Klasse="lunbo">
   <div Klasse="Inhalt">
   <ul id="Artikel">
    <li Klasse="Artikel">
     <a href="#" ><img src="img/pic1.jpg" ></a>
    </li>
    <li Klasse="Artikel">
     <a href="#" ><img src="img/pic2.jpg" ></a>
    </li>
    <li Klasse="Artikel">
     <a href="#" ><img src="img/pic3.jpg" ></a>
    </li>
    <li Klasse="Artikel">
     <a href="#" ><img src="img/pic4.jpg" ></a>
    </li>
    <li Klasse="Artikel">
     <a href="#" ><img src="img/pic5.jpg" ></a>
    </li>
   </ul>
   <div id="btn-left"><</div>
   <div id="btn-right">></div>
   <ul id="Kreis">
    
    <li class="Kreis"></li>
    <li class="Kreis"></li>
    <li class="Kreis"></li>
    <li class="Kreis"></li>
    <li class="Kreis"></li>
   </ul>
   </div>
  </div>
 </body>
</html>

CSS Code

*{
 Rand: 0;
 Polsterung: 0;
}
A{
 Listenstil: keiner;
}
li{
 Listenstil: keiner;
}
.lunbo{
 Breite: 100 %;
}
.Inhalt{
 Breite: 800px;
 Höhe: 300px;
 Rand: 20px automatisch;
 Position: relativ;
}
#Artikel{
 Breite: 100 %;
 Höhe: 100%;
 
}
.Artikel{
 Position: absolut;
 Deckkraft: 0;
 Übergang: alles 1en;
 
}
.item.aktiv{
 Deckkraft: 1;
}
img{
 Breite: 100 %;
}
#btn-links{
 Breite: 30px;
 Höhe: 69px;
 Schriftgröße: 30px;
 Farbe: weiß;
 Hintergrundfarbe: RGBA (0,0,0,0,4);
 Zeilenhöhe: 69px;
 Polsterung links: 5px;
 z-index: 10;/*Wird immer über dem Bild angezeigt*/
 Position: absolut;
 links: 0;
 oben: 50 %;
 transform: translateY(-60%);/*Schaltfläche nach oben verschieben und zentrieren*/
 Cursor: Zeiger;
 Deckkraft: 0;/*Normalerweise ausgeblendet*/
}
.lunbo:hover #btn-left{
 /*Maus darüber bewegen, Symbol wird angezeigt*/
 Deckkraft: 1;
}

#btn-rechts{
 Breite: 26px;
 Höhe: 69px;
 Schriftgröße: 30px;
 Farbe: weiß;
 Hintergrundfarbe: RGBA (0,0,0,0,4);
 Zeilenhöhe: 69px;
 Polsterung links: 5px;
 Z-Index: 10;
 Position: absolut;
 rechts: 0;
 oben: 50 %;
 Cursor: Zeiger;
 Deckkraft: 0;
 transformieren: übersetzenY(-60%);
}
.lunbo:hover #btn-right{
 Deckkraft: 1;
}
#Kreis{
 Höhe: 20px;
 Anzeige: Flex;
 Position: absolut;
 unten: 35px;
 rechts: 25px;
}
.Kreis{
 Breite: 10px;
 Höhe: 10px;
 Rahmenradius: 10px;
 Rand: 2px durchgehend weiß;
 Hintergrund: rgba(0,0,0,0,4);
 Cursor: Zeiger;
 Rand: 5px;
}
.Weiß{
 Hintergrundfarbe: #FFFFFF;
}

JS-Code

fenster.onload = funktion(){
var Elemente = document.getElementsByClassName("Element");
var Kreise = document.getElementsByClassName("Kreis");
var leftBtn = document.getElementById("btn-left");
var rightBtn = document.getElementById("btn-right");
var Inhalt = document.querySelector('.content');
var index=0;
var Timer = null;

//Klasse löschen
var clearclass = funktion(){
 für (let i=0;i<items.length;i++){
  Elemente[i].className="Element";
  Kreise[i].className="Kreis";
  Kreise[i].setAttribute("Anzahl",i);
 }
}
/*Nur eine Klasse anzeigen*/
Funktion verschieben(){
 Klasse löschen();
 items[index].className="Artikel aktiv";
 Kreise[index].className="Kreis weiß";
}
//Klicken Sie auf die Schaltfläche rechts, um zum nächsten Bild zu wechseln rightBtn.onclick=function(){
 wenn(index<items.length-1){
  Index++;
 }
 anders{
  Index = 0;
 }
 bewegen();
}
//Klicken Sie auf die Schaltfläche links, um zum vorherigen Bild zu wechseln leftBtn.onclick=function(){
 wenn(index<items.length){
  Index--;
 }
 anders{
  index=Elemente.Länge-1;
 }
 bewegen();
}
//Starte den Timer, klicke auf die Schaltfläche rechts, um das Karussell zu aktivieren timer=setInterval(function(){
 rightBtn.onclick();
},1500)
//Wenn Sie auf einen Punkt klicken, springen Sie zum entsprechenden Bild for(var i=0;i<circles.length;i++){
 Kreise[i].addEventListener("Klick",Funktion(){
  var Punktindex = this.getAttribute("num");
  index=punktindex;
  bewegen();
 })

}
//Bewegen Sie die Maus, um den Timer zu löschen und einen Drei-Sekunden-Timer zu starten, um den Inhalt langsam zu drehen.onmouseover=function(){
 Intervall löschen(Timer);
  Timer = Intervall festlegen(Funktion(){
   rightBtn.onclick();
  },3000)
}
//Maus rausbewegen und Timer starten content.onmouseleave=function(){
 Intervall löschen(Timer);
 Timer = Intervall festlegen(Funktion(){
  rightBtn.onclick();
 },1500)
}
}

Der Code ist möglicherweise nicht gut geschrieben und weist viele Mängel auf. Sie können gerne darauf hinweisen und Kritik äußern. Ich werde mein Bestes geben, um das Problem zu beheben. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht und ich werde mein Bestes geben, um sie zu beantworten. Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen.

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:

Über die Implementierung des JavaScript-Karussells
JS-Implementierung eines Karussellbeispiels
Reines js, um den Effekt eines Karussells zu erzielen
Natives JS zur Implementierung eines atmenden Karussells
Verwenden von JavaScript zum Implementieren von Karusselleffekten
Sehr detaillierte JavaScript-Implementierung eines Webseiten-Karussells

<<: So erreichen Sie ein zentriertes Layout im CSS-Layout

>>: Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

Detaillierte Erläuterung des Vuex-Gesamtfalls

3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen

Js implementiert Karussellbild 01

Js realisiert Karussellbild 02

Js implementiert Karussellbild 03

Detaillierte Erläuterung des Vuex-Gesamtfalls

Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

Die beste Lösung zum Zurücksetzen des Root-Passworts von MySQL 8.0.23

So implementieren Sie die Fernzugriffskontrolle in Centos 7.4

Bezüglich der chinesischen verstümmelten Zeichen bei der Übertragung eines href-Parameters

Verwenden Sie das Rem-Layout, um eine adaptive

Beispielcode für einen coolen Atemeffekt mit CSS3+JavaScript

Sechs Möglichkeiten zur Steigerung der Geschwindigkeit Ihrer Website

JavaScript zur Implementierung eines Sprachwarteschlangensystems

MySQL-Triggersyntax und Anwendungsbeispiele

Artikel empfehlen

Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen

So implementieren Sie eine Remote-Verbindung für Redis unter Linux

Detaillierte Erklärung langer Transaktionsbeispiele in MySQL

Analyse des HTML-Schreibstils und Gründe erfahrener Leute

Dünne Linientabelle zum Drucken von Webseiten + ultimative Strategie zum Drucken von Seiten

Details zum MySQL-Datentyp

Implementierung eines Nginx-Load-Balancing-Clusters

Verwendung und Beschreibung des HTML-Tags tbody

Detaillierte Erläuterung der Prinzipien des tiefen und flachen Klonens von JavaScript-Arrays und Nicht-Array-Objekten

Beispiele für korrekte Beurteilungsmethoden für Datentypen in JS

Implementierung von Nginx-Weiterleitungsübereinstimmungsregeln

Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue

So konfigurieren Sie Nginx, um zwischen dem PC- oder Mobiltelefonzugriff auf verschiedene Domänennamen zu unterscheiden

Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist

Zwei Lösungen für das 404-Problem beim Aktualisieren des Vue-Paket-Upload-Servers