3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen

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

Artikel empfehlen

So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung

Unter Linux ist alles eine Datei, daher besteht d...

Lösen Sie das Problem der Kombination von AND und OR in MySQL

Wie unten dargestellt: Wählen Sie Produktname, Pr...

Erklärung zur Verwendung von „Ersetzen“ und „Ersetzen in“ in MySQL

„Replace“ und „Replace into“ von MySQL sind beide...

Installieren Sie nodejs und yarn und konfigurieren Sie den Taobao-Quellprozessdatensatz

Inhaltsverzeichnis 1. Laden Sie nodejs herunter 2...

So migrieren Sie SQLite zu einem MySQL-Skript

Ohne weitere Umschweife werde ich den Code direkt...

Detailliertes Installationstutorial für MySQL 5.7.11 unter Win7

Betriebssystem: Win7 64-Bit Ultimate Edition Komp...

Beispielcode zur Installation von ElasticSearch und Kibana unter Docker

1. Einleitung Elasticsearch erfreut sich derzeit ...

Zusammenfassung des CSS-Zählers und des Inhalts

Die Inhaltseigenschaft wurde bereits in CSS 2.1 e...

Vue implementiert eine gleitende Navigation oben links und rechts

Navigation und andere Dinge werden bei der täglic...

Wie besteht man die W3C-Validierung?

Neben der Festlegung von Vorschriften für verschi...

Das Submit-Ereignis des Formulars reagiert nicht

1. Problembeschreibung <br />Wenn JS verwen...

So stellen Sie FastDFS in Docker bereit

Installieren Sie Fastdfs auf Docker Mount-Verzeic...

Schritte zum Aktivieren von TLS in Docker für eine sichere Konfiguration

Vorwort Ich hatte zuvor die 2375 Remote API von D...

So erstellen Sie ein php-nginx-alpine-Image von Grund auf in Docker

Obwohl ich bereits einige Projekte in einer Docke...

MySQL 8.0.20 Installations-Tutorial und ausführliches Tutorial zu Installationsproblemen

Ursprüngliche Adresse: https://blog.csdn.net/m0_4...