JavaScript implementiert kreisförmiges Karussell

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

Artikel empfehlen

Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite

In diesem Artikel wird der spezifische Code der V...

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

Auf vielen Websites wird im Eingabefeld Hinweiste...

Einige Erfahrung im Aufbau des React Native-Projektframeworks

React Native ist ein plattformübergreifendes Fram...

Richtige Methode zum Schreiben leerer Links, um Seitensprünge nach dem Klicken auf ein href #-Problem zu verhindern

Manchmal müssen Sie Links verwenden, aber Sie müss...

Semantik: Ist HTML/XHTML wirklich standardkonform?

<br />Originaltext: http://jorux.com/archive...

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

Installieren Sie Grafana. Die offizielle Website ...

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Beim Hochladen von Dateien, z. B. Videodateien, d...

Referenzschreiben im JS- und CSS-Stil

CSS: 1. <link type="text/css" href=&q...

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

Inhaltsverzeichnis Datenvolumen Anonyme und benan...

Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV

Seit der Einführung des contentEditable-Attributs ...

Die Organisation W3C gibt Stilempfehlungen für HTML4

Dies ist die Stilempfehlung der W3C-Organisation f...

CSS legt den Listenstil fest und erstellt den Implementierungscode für das Navigationsmenü

1. Setzen Sie das Listensymbol list-style-type: A...

So erstellen Sie schnell ELK basierend auf Docker

[Zusammenfassung] Dieser Artikel erstellt schnell...

Verwenden Sie ein Shell-Skript, um die Python3.8-Umgebung in CentOS7 zu installieren (empfohlen)

Ausführung mit nur einem Klick Um Python 3.8 in e...

Ein kurzer Vortrag über den MySQL-Index und die Redis-Sprungtabelle

Zusammenfassung Bei der Diskussion über MySQL-Ind...