Implementierung eines einfachen Karussells auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Karussells zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Ideen zur Implementierung eines JS-Karussells

1. Holen Sie sich zuerst die linken und rechten Schaltflächen der Elementbox
2. Anzeigen/Verbergen der linken und rechten Schaltflächen beim Überfahren mit der Maus
3. Generieren Sie dynamisch kleine Kreise und fügen Sie benutzerdefinierte Attribute hinzu
4. Fügen Sie dem kleinen Kreisklickereignis den aktuellen Klassennamen hinzu
5. Fügen Sie das Animationsereignis „animate“ hinzu, das gleich ist: Indexnummer * Fokusbreite
6. Klonen Sie das erste Bild bis zum Ende
7. Fügen Sie Rechts-/Linksklickereignisse hinzu
8. Stellen Sie den Timer so ein, dass das Ereignis „Rechtsklick“ manuell aufgerufen wird

HTML-Codeteil

<!DOCTYPE html>
<html lang="de">

<Kopf>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-kompatibel" content="IE=edge">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <link rel="stylesheet" href="css/index.css" >
 <script src="js/index.js"></script>
</Kopf>

<Text>
 <div Klasse="Fokus">
 <a href="javascript:;" Klasse="Pfeil_r">></a>
 <a href="javascript:;" Klasse="Pfeil_l">
  <</a>
  <ul>
   <li>
   <a href=""><img src="images/focus.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus1.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus2.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus3.jpg" alt=""></a>
   </li>
  </ul>
  <ol Klasse="Kreis">
  </ol>
 </div>
</body>

</html>

CSS-Stilteil

* {
 Polsterung: 0;
 Rand: 0;
 }
 
 li {
 Listenstil: keiner;
 }
 
 img {
 Rand: 0;
 vertikale Ausrichtung: oben;
 }
 
 A {
 Textdekoration: keine;
 }
 
 .Fokus {
 Position: relativ;
 Breite: 721px;
 Höhe: 455px;
 Rand: 100px automatisch;
 Überlauf: versteckt;
 }
 
 .fokus ul {
 Position: absolut;
 oben: 0;
 links: 0;
 Breite: 600 %;
 }
 
 .fokus ul li {
 schweben: links;
 }
 
 .Pfeil_r,
 .Pfeil_l {
 Anzeige: keine;
 Position: absolut;
 oben: 50 %;
 transformieren: verschiebeY(-50%);
 Breite: 40px;
 Höhe: 40px;
 Zeilenhöhe: 40px;
 Textausrichtung: zentriert;
 Schriftgröße: 24px;
 Hintergrund: rgba(0, 0, 0, .2);
 Farbe: #fff;
 Z-Index: 1;
 }
 
 .Pfeil_r {
 rechts: 0;
 }
 
 .Kreis {
 Position: absolut;
 unten: 10px;
 links: 50px;
 }
 
 .Kreis li {
 schweben: links;
 Breite: 8px;
 Höhe: 8px;
 Rand: 2px durchgezogen rgba(255, 255, 255, .5);
 Randradius: 50 %;
 Rand: 0 3px;
 Cursor: Zeiger;
 }
 
 .aktuell {
 Hintergrundfarbe: #fff;
 }

JavaScript-Teil

window.addEventListener('laden', Funktion() {
 //Element abrufen var focus = document.querySelector('.focus');
 var arrow_r = document.querySelector('.arrow_r');
 var arrow_l = document.querySelector('.arrow_l');
 var Fokusbreite = Fokus.Offsetbreite;
 // Wenn die Maus das Fokusfeld passiert, werden die linken und rechten Schaltflächen angezeigt/ausgeblendet und das Karussell wird angehalten focus.addEventListener('mouseenter', function() {
 arrow_r.style.display = "Block";
 arrow_l.style.display = "Block";
 Intervall löschen(Timer);
 Zeitgeber = null;
 });
 Fokus.addEventListener('mouseleave', Funktion() {
 arrow_r.style.display = "keine";
 arrow_l.style.display = "keine";
 Timer = Intervall setzen(Funktion() {
  //Klick-Ereignis aufrufen arrow_r.click();
 }, 2000);
 });
 //Kleine Kreise dynamisch generieren var ul = focus.querySelector('ul');
 var ol = Fokus.QuerySelector('.Kreis');
 für (var i = 0; i < ul.children.length; i++) {
 var li = document.createElement('li');
 li.setAttribute('index', i);
 ol.appendChild(li);
 //Kleiner Kreis Klickereignis li.addEventListener('click', function() {
  für (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
  }
  var index = this.getAttribute('index');
  Zahl = Index;
  Kreis = Index;
  dieser.Klassenname = "aktuell";
  animieren(ul, -index * Fokusbreite);
 })
 }
 ol.children[0].className = "aktuell";
 //Klone das erste Bild und füge es in das letzte ein var fis = ul.children[0].cloneNode(true);
 ul.appendChild(fis);
 //Rechtsklick-Ereignis var num = 0;
 var Kreis = 0;
 arrow_r.addEventListener('klicken', function() {
 wenn (num === ul.children.length - 1) {
  ul.style.left = 0;
  Zahl = 0;
 }
 Zahl++;
 animieren(ul, -num * Fokusbreite);
 Kreis++;
 wenn (Kreis === ul.children.length - 1) {
  Kreis = 0;
 }
 für (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 ol.children[Kreis].className = "aktuell";
 });
 //Linksklick-Ereignis arrow_l.addEventListener('click', function() {
 wenn (num == 0) {
  Num = ul.children.length - 1;
  ul.style.left = -num * Fokusbreite + 'px';

 }
 Nummer--;
 animieren(ul, -num * Fokusbreite);
 Kreis--;
 Kreis = Kreis < 0? ol.children.length - 1 : Kreis;
 //Funktion circleChange() aufrufen;
 });
 //Lösche den aktuellen Klassennamen der verbleibenden kleinen Kreise function circleChange() {
 für (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 //Den aktuellen Klassennamen des aktuellen kleinen Kreises belassen ol.children[circle].className = 'current';
 }
 //Animationsfunktion Funktion animate(obj, target, callback) {
 Intervall löschen(Objekt.Timer);
 obj.timer = setzeIntervall(Funktion() {
  var Schritt = (Ziel – Objekt.OffsetLeft) / 10;
  Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);
  wenn (Objekt.OffsetLeft == Ziel) {
  Intervall löschen(Objekt.Timer);
  Rückruf && Rückruf();
  }
  obj.style.left = obj.offsetLeft + Schritt + 'px';

 }, 15);
 }
 //Karussell automatisch abspielen var timer = setInterval(function() {
 //Klick-Ereignis aufrufen arrow_r.click();
 }, 2000);
});

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:

JavaScript implementiert kreisförmiges Karussell
Mehrere Methoden zur Implementierung von Karussellbildern in JS
js zum Schreiben des Karusselleffekts
JavaScript imitiert den Jingdong-Karusselleffekt
JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells
Natives JS zum Erzielen eines nahtlosen Karusselleffekts
js, um einen mobilen Karussell-Schiebeschalter zu erreichen
Javascript zur Realisierung des Scrollrad-Karussellbildes
Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

<<: So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

>>: So beheben Sie den 2002-Fehler bei der Installation einer MySQL-Datenbank in der Alibaba Cloud

Detaillierte Erklärung der grundlegenden Verwendung des Linux-Debuggers GDB

Implementierung eines einfachen Karussells auf Basis von JavaScript

Ideen zur Implementierung eines JS-Karussells

HTML-Codeteil

Detaillierte Erklärung der grundlegenden Verwendung des Linux-Debuggers GDB

Zabbix benutzerdefinierte Überwachung Nginx Status Implementierungsprozess

Lösungen für Dateien/Ordner, die unter Linux nicht gelöscht werden können

Zusammenfassung der Situationen, in denen MySQL-Indizes nicht verwendet werden

Detaillierte Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung

Warum sollte CSS im Head-Tag platziert werden?

Zwei einfache Möglichkeiten, Textwasserzeichen von Webseiten zu entfernen

Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung

CSS3 Milchglaseffekt

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10

Artikel empfehlen

JavaScript zum Erreichen eines Mouse-Tailing-Effekts

Übersicht über MySQL-Statistiken

So fügen Sie einer Tabelle in SQL Felder und Kommentare hinzu

Drei Möglichkeiten, um einen Textblinkeffekt im CSS3-Beispielcode zu erzielen

Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

Detaillierte Erklärung zum ordnungsgemäßen Löschen einer großen Tabelle in MySQL

So verwenden Sie LibreOffice zum Konvertieren von Dokumentformaten unter CentOS

Analyse und Praxis des serverseitigen Rendering-Prinzips von React

js zum Aufrufen der Netzwerkkamera und Behandeln häufiger Fehler

CSS steuert den Abstand zwischen Wörtern durch die Eigenschaft „letter-spacing“

Eine kurze Erläuterung der Syntax der VUE-Uni-App-Vorlage

JavaScript-Code zur Implementierung der Weibo-Batch-Unfollow-Funktion

js, um einfache Lupeneffekte zu erzielen

Detaillierte Erklärung der Funktionen outfile, dumpfile und load_file bei der MySQL-Injektion

Eine kurze Erläuterung der Unterstützung von Gleitkommaoperationen durch den Linux-Kernel