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

Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...

3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen

Js implementiert Karussellbild 01

Js realisiert Karussellbild 02

Js implementiert Karussellbild 03

Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode

Schreiben und Verstehen von Pfeilfunktionen und diesem in JS

Implementierung der Bereitstellung des Apollo-Konfigurationscenters mithilfe von Docker in CentOS7

Prinzip des Ausblendens von CSS-Elementen und display:none und visibility:hidden

Ein kurzes Verständnis des Unterschieds zwischen MySQL Union All und Union

So zeichnen Sie spezielle Grafiken in CSS

MySQL-Lösung zur Verschlüsselung ganzer Tabellen, keyring_file, detaillierte Erläuterung

Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

Grafisches Tutorial zum Konfigurieren eines Protokollservers unter Linux

Verschiedene Front-End-Druckmethoden des Webs: CSS steuert den Druckstil von Webseiten

Artikel empfehlen

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

mysql 5.7.18 winx64 Passwort ändern

Sechs Möglichkeiten, die Größe von Docker-Images zu reduzieren

MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen

Bringen Sie Ihnen Schritt für Schritt das Tutorial zur MySQL-Abfrageoptimierungsanalyse bei

Detailliertes Tutorial zum Minimieren der Installation der virtuellen CentOS 8.1-Maschine in VirtualBox

Details zu MySQL-Zeittypen und -Modi

Einfache Implementierung zum Ignorieren von Fremdschlüsseleinschränkungen beim Löschen von MySQL-Tabellen

MySQL-Abfragedaten für heute, diese Woche, diesen Monat und letzten Monat

Beispiel-Tutorial zur JavaScript-Typerkennungsmethode

So installieren Sie Grafana und fügen Influxdb-Überwachung unter Linux hinzu

Detaillierte Einführung in die gespeicherten MySQL-Funktionen

CSS Skills Collection – Klassiker unter den Klassikern