JavaScript implementiert kreisförmiges Karussell

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des kreisförmigen Karussells zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Falldemonstration:

1. Klicken Sie auf das Symbol unten, um die Bilder zu drehen
2. Nachdem die Bilder gedreht wurden, drehen Sie zum ersten Bild (detaillierte Erklärung im Code)

Projektstrukturdiagramm:

HTML Quelltext:

<!DOCTYPE html>
<html>
<Kopf>
 <meta charset="utf-8" />
 <title>Beispiel für ein Bilderkarussell</title>
 <link rel="stylesheet" href="css/lunbo.css" />
 <script src="js/tools.js"></script>
 <script src="js/lunbo.js"></script>
</Kopf>
<Text>
 <!-- Äußerer Behälter -->
 <div id="außen">
  <!-- Bilderliste-->
  <ul id="Bildliste">
   <li><img src="img/1.jpg" /></li>
   <li><img src="img/2.jpg" /></li>
   <li><img src="img/3.jpg" /></li>
   <li><img src="img/4.jpg" /></li>
   <li><img src="img/5.jpg" /></li>
   <!-- Wiederholen Sie die Anzeige des ersten Bildes, um den nächsten Zyklus zu erleichtern. -->
   <li><img src="img/1.jpg" /></li>
  </ul>
  <!-- Navigationsschaltflächen -->
  <div id="nav-btns">
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
  </div>
 </div>
</body>
</html>

CSS Code:

* {
 Rand: 0;
 Polsterung: 0;
}

/*
 * Den Stil des Äußeren festlegen */
#äußere {
 /*Breite und Höhe festlegen*/
 Breite: 520px;
 Höhe: 333px;
 /*Center*/
 Rand: 50px automatisch;
 /*Hintergrundfarbe festlegen*/
 Hintergrundfarbe: orange;
 /*Polsterung festlegen*/
 Polsterung: 10px 0;
 /*Relative Positionierung aktivieren*/
 Position: relativ;
 /*Überlaufenden Inhalt abschneiden*/
 Überlauf: versteckt;
}

/*Bilderliste festlegen*/
#img-Liste {
 /*Aufzählungspunkte entfernen*/
 Listenstil: keiner;
 /*Legen Sie die Breite von ul fest*/
 /*Breite: 2600px;*/
 /*Absolute Positionierung aktivieren*/
 Position: absolut;
 /*Setze den Offset (alle 520px nach links wird das nächste Bild angezeigt)*/
 links: 0px;
}

/*Setze das li im Bild*/
#img-list li {
 /*Float festlegen*/
 schweben: links;
 /*Linken und rechten Rand festlegen*/
 Rand: 0 10px;
}

/*Navigationsschaltflächen festlegen*/
#nav-btns {
 /*Absolute Positionierung aktivieren*/
 Position: absolut;
 /*Position festlegen*/
 unten: 15px;
}

#nav-btns ein {
 /*Hyperlink schweben lassen*/
 schweben: links;
 /*Legen Sie die Breite und Höhe des Hyperlinks fest*/
 Breite: 15px;
 Höhe: 15px;
 /*Hintergrundfarbe festlegen*/
 Hintergrundfarbe: rot;
 /*Linken und rechten Rand festlegen*/
 Rand: 0,5px;
 /*Transparenz einstellen*/
 Deckkraft: 0,5;
 /*Kompatibel mit IE8 transparent*/
 Filter: Alpha (Deckkraft = 50);
}

/*Mauseingabeeffekt einstellen*/
#nav-btns a:hover {
 Hintergrundfarbe: schwarz;
}

lunbo.js-Code

fenster.onload = funktion() {
 // Bilderliste abrufen var imgList = document.getElementById("img-list");
 // Alle img-Tags auf der Seite abrufen var imgArr = document.getElementsByTagName("img");
 //Breite von imgList festlegen imgList.style.width = 520 * imgArr.length + "px";

 // Navigationsschaltfläche in die Mitte setzen // Navigationsschaltfläche abrufen var navBtns = document.getElementById("nav-btns");
 // Äußeres bekommen
 var äußere = document.getElementById("äußere");
 // Den linken Wert von navBtns festlegen navBtns.style.left = (outer.offsetWidth - navBtns.offsetWidth) / 2 + "px";

 // Der Standardanzeigebildindex var index = 0;
 // Holen Sie sich alle ein
 var allA = document.getElementsByTagName("a");
 // Den ausgewählten Standardeffekt festlegen allA[index].style.backgroundColor = "black";

 /*
  * Klicken Sie auf den Hyperlink, um zum angegebenen Bild zu wechseln. * Klicken Sie auf den ersten Hyperlink, um das erste Bild anzuzeigen. * Klicken Sie auf den zweiten Hyperlink, um das zweite Bild anzuzeigen. * */

 // Klick-Antwort-Funktionen an alle Hyperlinks binden for (var i = 0; i < allA.length; i++) {
  // Jedem Hyperlink ein Num-Attribut hinzufügen allA[i].num = i;

  // Klick-Antwort-Funktion an Hyperlink binden allA[i].onclick = function() {
   // Automatischen Umschalttimer ausschalten clearInterval(timer);
   
   // Den Index des angeklickten Hyperlinks abrufen und auf Index setzen
   index = diese.num;

   // Setze das ausgewählte a
   setzeA();

   // Verwenden Sie die Move-Funktion, um Bilder zu wechseln move(imgList, "left", -520 * index, 20, function() {
    // Nachdem die Animation ausgeführt wurde, automatisches Umschalten aktivieren autoChange();
   });
  };
 }

 // Automatischen Bildwechsel einschalten autoChange();

 // Setze das ausgewählte a
 Funktion setA() {
  // Bestimmen Sie, ob der aktuelle Index das letzte Bild ist, wenn (Index >= imgArr.length - 1) {
   // Setze den Index auf 0
   Index = 0;

   // Das letzte Bild, das zu diesem Zeitpunkt angezeigt wird, und das letzte Bild ist exakt dasselbe wie das erste // Verwenden Sie CSS, um das letzte Bild zum ersten zu wechseln imgList.style.left = 0;
  }

  // Durchlaufe alle a und setze ihre Hintergrundfarbe auf Rot für (var i = 0; i < allA.length; i++) {
   alleA[i].style.backgroundColor = "";
  }

  // Ausgewähltes a auf Schwarz setzen allA[index].style.backgroundColor = "black";
 };

 // Definieren Sie eine automatische Umschalttimer-Kennung var timer;
 //Erstellen Sie eine Funktion zum Aktivieren des automatischen Bildwechsels function autoChange() {
  // Starte einen Timer um Bilder in regelmäßigen Abständen zu wechseln timer = setInterval(function() {
   //Erhöhe den Index index++;

   // Bestimme den Wert des Index index %= imgArr.length;

   // Animation ausführen, Bilder wechseln move(imgList, "left", -520 * index, 20, function() {
    //Navigationsschaltfläche ändern setA();
   });
  }, 3000);
 }

};

tool.js-Code:

/*
 * Erstellen Sie eine Funktion, die eine einfache Animation ausführen kann * Parameter:
 * obj: das zu animierende Objekt * attr: der zu animierende Stil, zum Beispiel: left top width height
 * Ziel: die Zielposition der Animation * Geschwindigkeit: die Bewegungsgeschwindigkeit (positive Zahlen bewegen nach rechts, negative Zahlen bewegen nach links)
 * Rückruf: Rückruffunktion, diese Funktion wird ausgeführt, nachdem die Animation abgeschlossen ist */
Funktion verschieben(Objekt, Attribut, Ziel, Geschwindigkeit, Rückruf) {
 // Den vorherigen Timer schließen clearInterval(obj.timer);

 // Aktuelle Position des Elements abrufen var current = parseInt(getStyle(obj, attr));

 // Bestimme den positiven und negativen Wert der Geschwindigkeit // Wenn es sich von 0 auf 800 bewegt, ist die Geschwindigkeit positiv // Wenn es sich von 800 auf 0 bewegt, ist die Geschwindigkeit negativ if (current > target) {
  //Die Geschwindigkeit sollte zu diesem Zeitpunkt ein negativer Wert sein speed = -speed;
 }

 // Starte einen Timer um den Animationseffekt auszuführen // Füge dem Objekt, das die Animation ausführt, eine Timer-Eigenschaft hinzu, um seine eigene Timer-Kennung zu speichern obj.timer = setInterval(function() {
  // Den ursprünglichen linken Wert von Box1 abrufen var oldValue = parseInt(getStyle(obj, attr));

  //Erhöhe den alten Wert var newValue = oldValue + speed;

  // Bestimmen Sie, ob newValue größer als 800 ist
  // Von 800 auf 0 verschieben // Beim Verschieben nach links müssen Sie feststellen, ob newValue kleiner als target ist
  // Wenn Sie sich nach rechts bewegen, müssen Sie feststellen, ob newValue größer als target ist
  if ((Geschwindigkeit < 0 && neuerWert < Ziel) || (Geschwindigkeit > 0 && neuerWert > Ziel)) {
   neuerWert = Ziel;
  }

  // Setze den neuen Wert auf box1
  obj.style[attr] = neuerWert + "px";

  // Wenn sich das Element auf 0px bewegt, stoppe die Animation if (newValue == target) {
   // Ziel erreichen, Timer ausschalten clearInterval(obj.timer);
   // Nachdem die Animation ausgeführt wurde, rufen Sie die Rückruffunktion callback && callback(); auf.
  }

 }, 30);
}

/*
 * Definieren Sie eine Funktion, um den aktuellen Stil des angegebenen Elements abzurufen. * Parameter:
 * obj Das Element, dessen Stil abgerufen werden soll. * name Der Name des abzurufenden Stils */
Funktion getStyle(Objekt, Name) {
 wenn (window.getComputedStyle) {
  // Normale Browsermethode mit der Methode getComputedStyle() return getComputedStyle(obj, null)[name];
 } anders {
  // IE8-Methode, keine getComputedStyle()-Methode return obj.currentStyle[name];
 }
}

/*
 * Definieren Sie eine Funktion, um einem Element einen angegebenen Klassenattributwert hinzuzufügen. * Parameter:
 * obj Das Element, dem das Klassenattribut hinzugefügt werden soll. * cn Der hinzuzufügende Klassenwert. */
Funktion addClass(Objekt, cn) {
 //Überprüfen, ob obj cn enthält
 wenn (!hasClass(obj, cn)) {
  obj.klassenname += " " + cn;
 }
}

/*
 * Bestimmen Sie, ob ein Element einen angegebenen Klassenattributwert enthält.
 * Wenn die Klasse existiert, geben Sie „true“ zurück, andernfalls „false“.
 */
Funktion hatKlasse(Objekt, cn) {
 // Bestimmen Sie, ob in obj eine cn-Klasse vorhanden ist
 //Erstellen Sie einen regulären Ausdruck var reg = new RegExp("\\b" + cn + "\\b");
 returniere reg.test(Objekt.Klassenname);
}

/*
 * Lösche das angegebene Klassenattribut aus einem Element */
Funktion entferneKlasse(Objekt, cn) {
 //Erstellen Sie einen regulären Ausdruck var reg = new RegExp("\\b" + cn + "\\b");
 // Lösche die Klasse
 obj.className = obj.className.replace(reg, "");
}

/*
 * Mit „toggleClass“ kann eine Klasse umgeschaltet werden. * Wenn das Element die Klasse hat, entfernen Sie sie. * Wenn das Element die Klasse nicht hat, fügen Sie sie hinzu. */
Funktion toggleClass(obj, cn) {
 //Beurteilen Sie, ob obj cn enthält
 wenn (hatKlasse(Objekt, cn)) {
  //Wenn ja, löschen Sie removeClass(obj, cn);
 } anders {
  //Wenn nicht, fügen Sie addClass(obj, cn); hinzu.
 }
}

Bildressourcen unten:

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:

Kennen Sie alle 24 Methoden zur JavaScript-Schleifendurchquerung?
Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript
Fallstudie zu JavaScript-Ereignisschleifen
Zusammenfassung der Verwendung von drei For-Schleifenanweisungen in JavaScript (for, for...in, for...of)
Analyse des Ereignisschleifenmechanismus von js
Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?
Detaillierte Erklärung verschiedener Loop-Speed-Tests in JS, die Sie nicht kennen
Detaillierte Erklärung der Schleifenverwendung in Javascript-Beispielen

<<: So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

>>: Lösung für das Problem, dass die InnoDB-Engine beim Starten von MySQL deaktiviert wird

jQuery realisiert den Bildverfolgungseffekt

JavaScript implementiert kreisförmiges Karussell

Falldemonstration:

Projektstrukturdiagramm:

jQuery realisiert den Bildverfolgungseffekt

Linux-Befehl „cut“ erklärt

HTML-Formular-Tag-Tutorial (5): Textfeld-Tag

So richten Sie Nginx so ein, dass der Domänenname an den angegebenen Port weitergeleitet wird

Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

Installieren Sie das Linux-System automatisch basierend auf Cobbler

Praxis der Vue Global Custom-Anweisung Modal Drag

Linux-Schritte zum Konfigurieren der lokalen Yum-Quelle, der inländischen Yum-Quelle und der Epel-Quelle

Vollständige Analyse des Vue-Diff-Algorithmus

Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML

Artikel empfehlen

Beispiel für die Implementierung einer virtuellen Liste im WeChat Mini-Programm

Die Neugestaltung einer Website ist für jede Familie eine schwierige Aufgabe

CSS3 realisiert den leuchtenden Randeffekt

Windows 10 und MySQL 5.5 installieren und verwenden ohne Installation ausführliches Tutorial (Bild und Text)

So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider

So erstellen Sie ein Tomcat-Image basierend auf Dockerfile

So übertragen Sie Dateien zwischen Windows und Linux

Centos7 implementiert Beispielcode zum Wiederherstellen von Daten basierend auf MySQL-Protokollen

MySQL-Paket für Abfrage ist zu groß – Problem und Lösung

Nginx verbessert die Zugriffsgeschwindigkeit basierend auf der GZIP-Komprimierung

Navicat stellt eine Verbindung zu MySQL8.0.11 her und es tritt ein Fehler 2059 auf

Detaillierte Erläuterung der drei Möglichkeiten zum Schneiden von Catalina.out-Protokollen in Tomcat

Implementierung einer Warenkorbfunktion basierend auf Vuex

Verwendung der JavaScript-Sleep-Funktion

Detaillierte Analyse, warum MySQL die Verwendung von UUID oder Snowflake-ID als Primärschlüssel nicht empfiehlt