Verwenden von JavaScript zum Implementieren von Karusselleffekten

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung der Spezialeffekte der Karussellkarte als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
  <style type="text/css">
   .aaa {
    Breite: 600px;
    Höhe: 350px;
    position: relative;/*Relative Positionierung*/
    Rand: 50px auto;/*50px vom oberen Rand und zentriert*/
   }
   .Bild img {
    position: absolute;/*absolute Positionierung*/
   }
   .punkt {
    Position: absolut;
    unten: 5px;
   }
   .punkt li {
    schweben: links;
    Breite: 16px;
    Höhe: 16px;
    Hintergrundfarbe: #e8e8e8;
    Randradius: 50 %;
    list-style: none;/*Listenstil löschen*/
    Rand rechts: 10px;
    Cursor: Zeiger;/*Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist*/
   }
   .links {
    Breite: 30px;
    Höhe: 30px;
    Position: absolut;
    oben: 169px;
    Textausrichtung: zentriert;
    Hintergrundfarbe: #000000;
    Zeilenhöhe: 30px;
    Farbe: #FFFFFF;
    Cursor: Zeiger;/*Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist*/
   }
   .Rechts {
    Breite: 30px;
    Höhe: 30px;
    Position: absolut;
    oben: 169px;
    rechts: 0;
    Textausrichtung: zentriert;
    Hintergrundfarbe: #000000;
    Zeilenhöhe: 30px;
    Farbe: #FFFFFF;
    Cursor: Zeiger;/*Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist*/
   }
   .aaa .Stelle {
    Hintergrundfarbe: #FF0000;
   }
  </Stil>
 </Kopf>
 <Text>
  <div Klasse="aaa">
   <div Klasse="Bild">
    <img src="images/1.jpg" style="Breite: 600px;Höhe: 350px;">
    <img src="images/2.jpg" style="Breite: 600px;Höhe: 350px;">
    <img src="images/3.jpg" style="Breite: 600px;Höhe: 350px;">
    <img src="images/4.jpg" style="Breite: 600px;Höhe: 350px;">
    <img src="images/5.jpg" style="Breite: 600px;Höhe: 350px;">
   </div>
   <ul Klasse="Punkt">
    <li Klasse="Stelle"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   <div class="left">&lt;</div><!--&lt; Escape-Zeichen-->
   <div class="right">&gt;</div><!--&gt; Escape-Zeichen-->
  </div>
  <Skript>
   var lis = document.querySelectorAll(".dot li")
   var Bild = document.querySelectorAll(".picture img")
   var left = document.querySelector(".left")
   var rechts = document.querySelector(".rechts")
   var aaa = document.querySelector(".aaa")
   var index = 0 //Setze die Indexnummer der Variable picture[index].style.opacity = 1 //Das erste Bild wird angezeigt //Rechte Taste ändert das Bild right.onclick = function() {
    fn("+")
   }
   //Linke Taste um das Bild zu ändernleft.onclick = function() {
    fn("-")
   }
   //Timer ändert das Bild alle 3000 Millisekunden var timer = setInterval(function() {
    fn("+")
   }, 3000)
   //Maus geht in die Pause aaa.onmouseover = function() {
    Intervall löschen(Timer)
   }
   //Maus raus und fortfahren aaa.onmouseout = function() {
    Timer = Intervall setzen(Funktion() {
     fn("+")
    }, 3000)
   }
   //Ändere das Bild wenn die Maus den Punkt berührt for (var i = 0; i < lis.length; i++) {
    lis[i].in = i
    lis[i].onmouseover = Funktion() {
     fn(dies.in)
    }
   }
   //Funktion Funktion fn(ope) {
    picture[index].style.opacity = 0 //Das vorherige Bild wird ausgeblendet lis[index].className = "" //Kleinen Punktstil löschen//Ope beurteilen
    wenn (Typ von ope === 'Zahl') {
     Index = offen
    } else if (ope === '+') { //Beurteilen, ob die richtige Taste gedrückt ist if (index === 4) {
      Index = 0
     } anders {
      Index++
     }
    } anders {
     if (index === 0) { // Beurteilen Sie, ob der Index der linken Taste = 4 ist
     } anders {
      Index--
     }
    }
    picture[index].style.opacity = 1 //Aktuelles Bild displaylis[index].className = "spot" //Dem Spot einen Stil hinzufügen}
  </Skript>
 </body>
</html>

Der Effekt ist in der Abbildung dargestellt:

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: