Implementierung eines Karussells mit nativem JavaScript

In diesem Artikel finden Sie den spezifischen Code zur Implementierung des Karussells in JavaScript als Referenz. Der spezifische Inhalt ist wie folgt

Wirkung:

Code:

<!DOCTYPE html>
<html>

 <Kopf>
 <meta charset="UTF-8">
 <Titel></Titel>
 <Stil>
 * {
 Rand: 0;
 Polsterung: 0;
 }
 
 ul,
 li {
 Listenstil: keiner;
 }
 
 .banner {
 Breite: 1200px;
 Höhe: 535px;
 Rand: 1px durchgehend rot;
 Rand: 0 automatisch;
 Position: relativ;
 }
 
 .slider li {
 Position: absolut;
 links: 0;
 oben: 0;
 }
 
 A {
 Breite: 40px;
 Höhe: 50px;
 Hintergrundfarbe: rgba(0, 0, 0, 0,1);
 Schriftgröße: 50px;
 Textausrichtung: zentriert;
 Zeilenhöhe: 50px;
 Position: absolut;
 Textdekoration: keine;
 Farbe: grau;
 }
 
 .btnl {
 links: 0;
 oben: 50 %;
 Rand oben: -15px;
 }
 
 .btnr {
 rechts: 0;
 oben: 50 %;
 Rand oben: -25px;
 }
 
 .tabs {
 Position: absolut;
 unten: 20px;
 links: 50%;
 Rand links: -75px;
 }
 
 .tabs li {
 Breite: 15px;
 Höhe: 15px;
 Hintergrundfarbe: #ccc;
 Randradius: 50 %;
 schweben: links;
 Rand rechts: 10px;
 }
 </Stil>
 </Kopf>

 <Text>
 <div Klasse="Banner">
 <ul Klasse="Schieberegler">
 <li><img src="img/b1.jpg" alt="" /></li>
 <li><img src="img/b2.jpg" alt="" /></li>
 <li><img src="img/b3.jpg" alt="" /></li>
 <li><img src="img/b4.jpg" alt="" /></li>
 <li><img src="img/b5.jpg" alt="" /></li>
 <li><img src="img/b6.jpg" alt="" /></li>
 </ul>
 <a href="javascript:void(0);" Klasse="btnl">
 <</a>
 <a href="javascript:void(0);" Klasse="btnr">></a>
 <ul Klasse="Tabs">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <Skripttyp="text/javascript">
 var Banner = document.getElementsByClassName("Banner")[0];
 var Schieberegler = document.getElementsByClassName("Schieberegler")[0];
 var li = slider.getElementsByTagName("li");
 var btnl = document.getElementsByClassName("btnl")[0];
 var btnr = document.getElementsByClassName("btnr")[0];
 var tabs = document.getElementsByClassName("tabs")[0];
 var btns = tabs.getElementsByTagName("li");

 //Initialisiere btns[0].style.backgroundColor = "red";

 für(var i = 0; i < li.Länge; i++) {
 wenn(i == 0) {
 weitermachen;
 } anders {
 li[i].style.opacity = 0;
 }
 }

 var Timer = setInterval(mover, 1000);

 //Deklarieren Sie eine Variable, die den Index des aktuellen Bildes darstellt. var num = 0;

 Funktion Mover() {
 Zahl++;
 wenn(num == li.length) {
 Zahl = 0;
 }
 für(var i = 0; i < li.Länge; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "rot";

 }

 Funktion movel() {
 Nummer--;
 wenn(Zahl == -1) {
 Num = li.Länge - 1;
 }
 für(var i = 0; i < li.Länge; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "rot";
 }

 banner.onmouseover = Funktion() {
 Intervall löschen(Timer)
 }

 banner.onmouseout = Funktion() {
 Timer = Intervall festlegen(Mover, 1000)
 }

 btnl.onclick = Funktion(e) {
 bewegen();
 }
 btnr.onclick = Funktion(e) {
 Beweger();
 }

 // Kleiner Punkteffekt for(var i = 0; i < btns.length; i++) {
 btns[i].index = i;
 btns[i].onmouseover = Funktion() {
 wenn(dieser.index == num) {
 zurückkehren;
 } anders {
 für(var i = 0; i < li.Länge; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[this.index].style.opacity = 1;
 btns[this.index].style.background="rot";
 num=dieser.index;
 }
 }
 }
 </Skript>
 </body>

</html>

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:

js, um den kompletten Code des Karussells zu implementieren
Beispielcode zur Implementierung eines Karussells mit nativem JS
js, um den Effekt der Unterstützung des Karussell-Bildbeispiels mit Schiebeschalter für Mobiltelefone zu erzielen
js, um zu erreichen, klicken Sie auf die linke und rechte Schaltfläche, um Bilder abzuspielen
Einfacher Code zur Implementierung eines JS-Karusselldiagramms
JS implementiert nahtlosen Karussellcode für links und rechts
JS realisiert automatischen Karusselleffekt (adaptive Bildschirmbreite + Gleiten des Touchscreens des Mobiltelefons)
Natives js, um einen Endlosschleifen-Karusselleffekt zu erzielen
Verwenden Sie HTML+JS+CSS, um einen Seitenkarusselleffekt zu erzielen (Beispielerklärung)
Implementierung eines Karusselldiagramms basierend auf der Karussellkomponente vue.js vue-awesome-swiper

<<: Natives JavaScript-Message Board

>>: Implementierung einer Warenkorbfunktion basierend auf Vuex