Natives JS zum Erzielen eines nahtlosen Karusselleffekts

Native js realisiert den Karusselleffekt (nahtloses Scrollen) zu Ihrer Information. Der spezifische Inhalt ist wie folgt

Effektbild:

Code:

<!DOCTYPE html>
<html lang="de">
<!-- Tag07 7-10-14 -->
 
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <script src="./images1/20.animate.js"></script>
 <Stil>
 * {
  Rand: 0;
  Polsterung: 0;
 }
 
 li {
  Listenstil: keiner;
 }
 
 .Fokus {
  /*Überlauf: versteckt;*/
  Position: absolut;
  oben: 100px;
  links: 200px;
  Breite: 721px;
  Höhe: 455px;
  Hintergrundfarbe: braun;
 }
 
 .vorherige,
 .nächste {
  Anzeige: keine;
  Position: absolut;
  oben: 50 %;
  Rand oben: -15px;
  Breite: 20px;
  Höhe: 30px;
  Hintergrundfarbe: rgba(0, 0, 0, .3);
  Textdekoration: keine;
  Farbe: #fff;
  Zeilenhöhe: 30px;
  Textausrichtung: zentriert;
  Schriftgröße: 16px;
  Z-Index: 2;
 }
 
 .fokus ul {
  /* Die Einführung von Animations-JS-Dateien erfordert eine Positionierung*/
  Position: absolut;
  Breite: 600 %;
 }
 
 .fokus ul li {
  schweben: links;
 }
 
 .vorherige {
  links: 0;
  Rahmen oben rechts – Radius: 15px;
  Rahmen unten rechts – Radius: 15px;
 }
 
 .nächste {
  rechts: 0;
  Rahmen oben links – Radius: 15px;
  Rahmen unten links – Radius: 15px;
 }
 
 .promo-nav {
  Position: absolut;
  unten: 10px;
  links: 60px;
  Breite: 200px;
  Höhe: 18px;
  Rahmenradius: 9px;
 }
 
 .promo-nav li {
  schweben: links;
  Breite: 10px;
  Höhe: 10px;
  Hintergrundfarbe: #fff;
  Rand: 2px;
  Randradius: 50 %;
 }
 
 .promo-nav .aktuell {
  Hintergrundfarbe: orange;
 }
 .fokus ul li a img {
  Breite: 721px;
  Höhe: 455px;
 }
 </Stil>
</Kopf>
 
<Text>
 <div Klasse="Fokus">
 <ul>
  <li>
  <a href="#" ><img src="images1/focu01.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu02.jpg" alt=""></a>
  </li>
 
  <li>
  <a href="#" ><img src="images1/focu03.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu04.jpg" alt=""></a>
  </li>
 
 </ul>
 <!-- Linke Taste -->
 <a href="javascript:;" class="prev">&lt;</a>
 <!-- Rechte Taste -->
 <a href="javascript:;" class="nächste">&gt;</a>
 
 <ol Klasse="Promo-Navigation">
 
 </ol>
 </div>
 <Skript>
 window.addEventListener('laden', Funktion() {
  var Fokus = document.querySelector('.focus');
  var prev = document.querySelector('.prev');
  var weiter = document.querySelector('.weiter');
  var Fokusbreite = Fokus.Offsetbreite;
  //Die Maus geht durch focus.addEventListener('mouseenter', function() {
   vorheriger Stil.Anzeige = "Block";
   nächster.style.display = "Block";
   Intervall löschen(Timer);
   timer = null; // lösche die Timervariable })
  //Die Maus verlässt den Fokus.addEventListener('mouseleave', function() {
   vorheriger Stil.Anzeige = "keine";
   nächster.style.display = "keine";
   Timer = Intervall setzen(Funktion() {
   nächster.klick();
   }, 2000)
 
  })
  //3. Dynamisch kleine Kreise generieren. So viele kleine Kreise generieren, wie Bilder vorhanden sind. var ul = focus.querySelector('ul');
  var ol = Fokus.QuerySelector('.promo-nav');
  // konsole.log(ul.children.length); 4
  für (var i = 0; i < ul.children.length; i++) {
  //Erstelle eine li
  var li = document.createElement('li');
  // Notieren Sie die Indexnummer des aktuellen kleinen Kreises über benutzerdefinierte Attribute li.setAttribute('index', i);
  //Nach ol einfügen ol.appendChild(li);
  //4. Klicken Sie mit der Maus auf den kleinen Kreis, um seine Farbe zu ändern (fügen Sie die aktuelle Klasse zum kleinen Kreis hinzu und entfernen Sie diese Klasse aus den anderen kleinen Kreisen) (exklusive Idee)
  //Binde das Klickereignis direkt ein, während der kleine Kreis generiert wird li.addEventListener('click', function() {
   für (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
   }
   dieser.Klassenname = "aktuell";
 
 
   //5. Klicken Sie auf den kleinen Punkt, um das Bild zu verschieben. Die UL wird verschoben.
   //Die Distanz, die ul zurücklegt, ist die Indexnummer des kleinen Kreises multipliziert mit der Breite des Bildes. Beachten Sie, dass es sich um einen negativen Wert handelt. //Wenn wir auf ein kleines li klicken, erhalten wir die Indexnummer des aktuellen kleinen li. var index = this.getAttribute('index');
   //Wenn wir auf ein bestimmtes li klicken, geben wir die Indexnummer von li an num
   Zahl = Index;
   //Wenn wir auf ein bestimmtes li klicken, geben wir die Indexnummer von li an, um zu indizieren
   Kreis = Index;
   konsole.log(index);
 
   animieren(ul, -index * Fokusbreite, );
  })
 
  }
  //Setze die Farbe des ersten li in ol auf Weiß ol.children[0].className = 'current';
  //6. Klonen Sie das erste li und platzieren Sie es hinter ul var first = ul.children[0].cloneNode(true);
  ul.appendChild(erstes);
  //7. Klicken Sie auf die Schaltfläche rechts, um ein Bild zu scrollen. var num = 0;
  var Kreis = 0;
  varflag = wahr;
  //Rechte Maustaste next.addEventListener('click', function() {
   wenn (Flagge) {
   flag = false; //Schließen Sie zuerst die Drosselklappe //5. Wenn Sie das zuletzt kopierte Bild erreichen, wird ul schnell auf 0 zurückgesetzt (nahtloses Scrollen).
   wenn (num == ul.children.length - 1) {
    ul.style.left = 0;
    Zahl = 0;
   }
   Zahl++;
   animieren(ul, -num * Fokusbreite, Funktion() {
    Flagge = wahr;
   });
   //8. Klicken Sie auf die Schaltfläche rechts und der kleine Kreis ändert sich entsprechend. Deklarieren Sie eine Variable, um die Änderung des kleinen Kreises zu steuern circle++;
   //Wenn der Kreis gleich 4 ist, bedeutet das, dass wir mit dem Klonen des letzten Bildes fertig sind und es wiederherstellen werden, wenn (Kreis == ol.children.length) {
    Kreis = 0;
   }
   // //Lösche die restlichen kleinen Kreisklassennamen// for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // //Lass den aktuellen kleinen Kreis mit dem aktuellen Klassennamen// ol.children[circle].className = 'current';
   Kreisänderung();
   }
  })
  //Linke Taste prev.addEventListener('click', function() {
  wenn (Flagge) {
   Flagge = falsch;
   //5. Wenn Sie das zuletzt kopierte Bild erreichen, wird ul schnell auf 0 zurückgesetzt (nahtloses Scrollen).
   wenn (num == 0) {
   Num = ul.children.length - 1;
   ul.style.left = -num * Fokusbreite + 'px';
 
   }
   Nummer--;
   animieren(ul, -num * Fokusbreite, Funktion() {
   Flagge = wahr;
   });
   //8. Klicken Sie auf die Schaltfläche rechts und der kleine Kreis ändert sich entsprechend. Deklarieren Sie eine Variable, um die Änderung des kleinen Kreises zu steuern circle--;
   //Wenn der Kreis kleiner als 0 ist, wird der kleine Kreis in den vierten kleinen Kreis geändert, wenn (Kreis < 0) {
   Kreis = ol.Kinder.Länge - 1;
   }
   // Lösche die restlichen kleinen Kreisklassennamen // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // Den aktuellen kleinen Kreis belassen, aktueller Klassenname // ol.children[circle].className = 'current';
   Kreisänderung();
  }
  })
 
  Funktion Kreisänderung() {
  //Lösche die restlichen Klassennamen des kleinen Kreises für (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
  }
  //Den aktuellen kleinen Kreis belassen Aktueller Klassenname ol.children[circle].className = 'current';
  }
 
  //10. Diashow automatisch abspielen var timer = setInterval(function() {
  nächster.klick();
  }, 2000)
 
 })
 </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:

JavaScript implementiert kreisförmiges Karussell
Mehrere Methoden zur Implementierung von Karussellbildern in JS
js zum Schreiben des Karusselleffekts
Implementierung eines einfachen Karussells auf Basis von JavaScript
JavaScript imitiert den Jingdong-Karusselleffekt
JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells
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

<<: Detaillierte Erklärung zum Kompilieren und Installieren von MySQL 5.6 auf CentOS und zum Installieren mehrerer MySQL-Instanzen

>>: IIS 7.5 verwendet das URL-Rewrite-Modul, um eine Webseitenumleitung zu erreichen