js, um die Produktionsmethode des Karussells zu realisieren

In diesem Artikel wird der spezifische Code für js zur Realisierung der Anzeige von Karussellbildern zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt

Der Effekt ist wie in der Abbildung dargestellt

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  
  <style type="text/css">
   
   * {
    Polsterung: 0;
    Rand: 0;
   }
   .container {
    Position: relativ;
    Breite: 600px;
    Höhe: 300px;
    Rand: 30px automatisch;
    Überlauf: versteckt;
   }
       .links {
     Anzeige: keine;
     Position: absolut;
     oben: 50 %;
     links: -20px;
     transformieren: verschiebeY(-50%);
     Breite: 50px;
     Höhe: 50px;
     Rahmen oben rechts – Radius: 50 %;
     Rahmen unten rechts – Radius: 50 %;
     Hintergrundfarbe: rgba(0,0,0,0,5);
     Z-Index: 999;
    }
    .links ich {
    Anzeige: Block;
       Rand oben: 10px;
    Rand links: 20px;
    Breite: 30px;
    Höhe: 30px;
    Hintergrund: URL (Bild/links.png) keine Wiederholung;
    Hintergrundgröße: 30px 30px;
    }
   .Rechts {
    Anzeige: keine;
    Position: absolut;
    oben: 50 %;
    rechts: -20px;
    transformieren: verschiebeY(-50%);
    Breite: 50px;
    Höhe: 50px;
    Rahmen oben links-Radius: 50 %;
    Rahmen unten links – Radius: 50 %;
    Hintergrundfarbe: rgba(0,0,0,0,5);
    Z-Index: 999;
   }
   .richtig ich {
     Anzeige: Block;
     Rand oben: 10px;
     Rand rechts: 20px;
     Breite: 30px;
     Höhe: 30px;
     Hintergrund: URL (Bild/rechts.png) keine Wiederholung;
     Hintergrundgröße: 30px 30px;
    }
   
   ul li,ol li {
    Listenstil: keiner;
   }
   .Bild {
    Position: absolut;
   }
   .Liste {
    Position: absolut;
    unten: 10px;
    links: 10px;
   }
      .Liste li {
    schweben: links;
    Rand rechts: 10px;
    Breite: 10px;
    Höhe: 10px;
    Rahmenradius: 10px;
    Hintergrundfarbe: rgba(0,0,0,0,5);
    Cursor: Zeiger;
   }
   .Liste .aktuell {
    Hintergrundfarbe: #fff;
   }
   .Bild li {
    Position: absolut;
    Breite: 600px;
    Höhe: 300px;
   }
   img {
    Breite: 100 %;
    Höhe: 100%;
   }
   
  </Stil>
 </Kopf>
 <Text>
  <div Klasse="Container">
   <span Klasse="links"><i></i></span>
   <span class="rechts"><i></i></span>
   <ul Klasse="Bild">
    <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>
   </ul>
   <ol Klasse="Liste">
   </ol>
  </div>
  <Skripttyp="text/javascript">
   var Bild = document.querySelector('.Bild');
   var Liste = Dokument.AbfrageSelector('.Liste');
   Variable Nummer = 0;
   var Kreis=0;
   für (i=0;i<Bild.Kinder.Länge;i++)
   {   
    // Position des Bildes festlegen picture.children[i].style.left = i*600 + 'px';
    // Automatisch eine geordnete Liste generieren var li = document.createElement('li');
    li.setAttribute('index',i);
    
    Liste.AnhängenKind(li);
    // Füge ein Klickereignis zu li hinzu li.addEventListener('click',function () {
     für (var i=0;i<list.children.length;i++) {
      Liste.Kinder[i].Klassenname = '';
     }
     dieser.Klassenname = "aktuell";
     var index = this.getAttribute('index');
     Zahl = Index;
     Kreis = Index;
     animieren(Bild, -Index*600);
    })
   }
   // Legen Sie den Klassennamen der ersten alten untergeordneten Liste fest.children[0].className = 'current';
   var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var Container = Dokument.QuerySelector('.Container');
   //Maus so einstellen, dass sie das Ereignis verlässt container.addEventListener('mouseover',function () {
    links.Stil.Anzeige = "Block";
    rechts.Stil.Anzeige = "Block";
    Intervall löschen(Timer)
    Zeitgeber = null;
   })
   container.addEventListener('mouseleave',Funktion () {
    linke.Stil.Anzeige = "keine";
    rechts.Stil.Anzeige = "keine";
    Timer = Intervall festlegen(Funktion () {
     rechtsklick();
    },1000);
   })
   
   // js-Animationsfunktion Funktion animate (obj, target, callback) {
    Intervall löschen(obj.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);
      wenn (Rückruf) {
       Rückruf();
      }
     }
     obj.style.left = obj.offsetLeft + Schritt + 'px';
    },15)
   }
   
   var first = Bild.Kinder[0].cloneNode(true);
   Bild.AnhängenKind(erstes);
   Bild.letztesKind.Stil.links = (Bild.Kinder.Länge-1)*600 + 'px';
   //Rechtsklick eventright.addEventListener('click',function () {
    if (num==Bild.Kinder.Länge-1) {
     Bild.Stil.links = 0;
     Zahl = 0;
    }
    Zahl++;
    animieren(Bild, -Num*600);
    Kreis ++;
    wenn (Kreis == Liste.Kinder.Länge) {
     Kreis = 0;
    }
    
    für (var i = 0;i<list.children.length;i++) {
     Liste.Kinder[i].Klassenname = '';
    }
    Liste.Kinder[Kreis].Klassenname = "aktuell";
   })
   // Linksklick-Ereignis left.addEventListener('click',function () {
    wenn (num==0) {
     Bild.Stil.links = -(Bild.Kinder.Länge-1)*600 +'px';
     Num = Bild.Kinder.Länge-1;
    }
    Nummer--;
    animieren(Bild, -Num*600);
    Kreis --;
    wenn (Kreis < 0) {
     Kreis = Liste.Kinder.Länge-1;
    }
    
    für (var i = 0;i<list.children.length;i++) {
     Liste.Kinder[i].Klassenname = '';
    }
    Liste.Kinder[Kreis].Klassenname = "aktuell";
   })
   
   var Timer = Intervall festlegen(Funktion () {
    // Manuell right.click() aufrufen;
   },1000);
  </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:

js, um den kompletten Code des Karussells zu implementieren
Beispielcode zur Implementierung eines Karussells mit nativem JS
js, um den Effekt der Unterstützung des Karussell-Bildbeispiels mit Schiebeschalter für Mobiltelefone zu erzielen
Einfacher Code zur Implementierung eines JS-Karusselldiagramms
js, um zu erreichen, klicken Sie auf die linke und rechte Schaltfläche, um Bilder abzuspielen
JS realisiert automatischen Karusselleffekt (adaptive Bildschirmbreite + Gleiten des Touchscreens des Mobiltelefons)
JS implementiert nahtlosen Karussellcode für links und rechts
Verwenden Sie HTML+JS+CSS, um einen Seitenkarusselleffekt zu erzielen (Beispielerklärung)
Natives js, um einen Endlosschleifen-Karusselleffekt zu erzielen
js realisiert den gleitenden Karusselleffekt von links nach rechts

<<: Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern

>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux