JavaScript imitiert den Jingdong-Karusselleffekt

<Text>
 <h1>Diashow-Anzeige</h1>
 <div id="hat">

 <!-- Bild -->
 <div id="img-div" onmouseover="doStop()" onmouseout="doStart()">
  <img src="./1.jpg">
  <img src="./2.jpg">
  <img src="./3.jpg">
  <img src="./4.jpg">
  <img src="./5.jpg">
  <img src="./6.jpg">
  <img src="./7.jpg">
  <img src="./8.jpg">
 </div>

 <!-- Linke und rechte Schaltflächen -->
 <div id="btn-div">
  <div id="left-btn" onclick="doLeftClick()">
  <h3> < </h3>
  </div>
  <div id="right-btn" onclick="doRightClick()">
  <h3> > </h3>
  </div>
 </div>

 <!-- Punkt -->
 <div id="cir-div">
  <div onmouseover="macheBewegung(1)"></div>
  <div onmouseover="macheBewegung(2)"></div>
  <div onmouseover="macheBewegung(3)"></div>
  <div onmouseover="macheBewegung(4)"></div>
  <div onmouseover="macheBewegung(5)"></div>
  <div onmouseover="macheBewegung(6)"></div>
  <div onmouseover="macheBewegung(7)"></div>
  <div onmouseover="macheBewegung(8)"></div>
 </div>
 </div>

</body>

<Stil>
 * {
 Rand: 0px;
 Polsterung: 0px;
 }

 Körper {
 Hintergrundfarbe: rgb(255, 249, 249);
 }

 h1 {
 Textausrichtung: zentriert;
 Polsterung oben: 40px;
 Farbe: rgba (250, 54, 129, 0,562);
 }

 #tat {
 Position: relativ;
 Breite: 590px;
 Höhe: 470px;
 Rand: 30px automatisch;
 }

 #img-div {
 Position: absolut;
 }

 #img-div img {
 Breite: 590px;
 Anzeige: keine;
 Cursor: Zeiger;
 z-Index: -1;
 }

 /* Diese beiden Absätze können weggelassen werden*/
 /* Zeige das erste Bild */
 #img-div img:erstes-Kind {
 Anzeige: Block;
 }

 /* Lasse den ersten Punkt aufleuchten */
 #cir-div div:erstes-Kind {
 Hintergrund: #fff;
 }

 #cir-div {
 Position: absolut;
 /* Position relativ zum Bild */
 links: 40px;
 unten: 25px;
 }

 /* Der Punkt unten*/
 #cir-div div {
 Breite: 8px;
 Höhe: 8px;
 schweben: links;
 /* 50% ist rund*/
 Randradius: 50 %;
 Rand rechts: 6px;
 Rand: 1px durchgezogen rgba(0, 0, 0, .05);
 Hintergrund: rgba(255, 255, 255, .4);
 }

 #links-btn {
 Position: absolut;
 /* Position relativ zum Bild */
 oben: 45 %;

 /*Linker Halbkreisknopf*/
 Breite: 27px;
 Höhe: 38px;
 Hintergrund: rgba(119, 119, 119, 0,5);
 Rahmenradius: 0 20px 20px 0;
 /* Animationseffekt, vor der Änderung platziert, wenn die Maus darüber bewegt wird, ändert sich langsam die Farbe*/
 Übergang: Hintergrundfarbe, 0,3 s Auslaufzeit;
 }

 #rechts-btn {
 Position: absolut;
 /* Position relativ zum Bild */
 oben: 45 %;
 rechts: 0px;

 /* Rechter Halbkreisknopf */
 Breite: 27px;
 Höhe: 38px;
 Hintergrundfarbe: rgba(119, 119, 119, 0,5);
 Rahmenradius: 20px 0 0 20px;
 /* Animationseffekt, vor der Änderung platziert, wenn die Maus darüber bewegt wird, ändert sich langsam die Farbe*/
 Übergang: Hintergrundfarbe, 0,3 s Auslaufzeit;
 }

 #left-btn:hover {
 Hintergrundfarbe: rgba(32, 32, 32, 0,5);
 Cursor: Zeiger;
 }

 #right-btn:hover {
 Hintergrundfarbe: rgba(32, 32, 32, 0,5);
 Cursor: Zeiger;
 }

 #links-btn h3 {
 Farbe: #fff;
 Rand oben: 4px;
 Rand links: 2px;
 }

 #rechts-btn h3 {
 Farbe: #fff;
 Rand oben: 4px;
 Rand links: 8px;
 }
</Stil>

<Skript>
 //Zeige das erste Bild var count = 1;
 //Zeit var time = null;
 //Bilderliste var imglist = document.getElementById("img-div").getElementsByTagName("img");
 //Punktliste var cirlist = document.getElementById("cir-div").getElementsByTagName("div");

 //Zeige das entsprechende Bild und lasse den entsprechenden Punkt aufleuchten function show(x) {
 für (var i = 0; i < imglist.length; i++) {
  wenn (x == i + 1) {
  //Bild anzeigen imglist[i].style.display = "block";
  //Die Punkte leuchten aufcirlist[i].style.backgroundColor = "#fff";
  } anders {
  imglist[i].style.display = "keine";
  cirlist[i].style.background = "rgba(255, 255, 255, .4)";
  }
 }
 }

 //Zeitgesteuerte Karussellbilder (alle 3 Sekunden ein Bild wechseln)
 Funktion doStart() {
 wenn (Zeit == null) {
  Zeit = setzeIntervall(Funktion () {
  zählen++;
  anzeigen(zählen);
  wenn (Anzahl >= 8) {
   Anzahl = 0;
  }
  }, 3000);
 }
 }

 //Stoppe das Karussell Funktion doStop() {
 wenn (Zeit != null) {
  ClearInterval(Zeit);
  Zeit = null;
 }
 }

 //Wenn die Maus zu einem Punkt bewegt wird, ändert sich das Bild entsprechend, und dann leuchtet der nächste Punkt auf, anstatt des vorherigen Punkts. function doMove(x) {
 zeigen(x);
 // Weisen Sie der Zählung die Position zu, und das Bild wechselt vom nächsten Bild count = x;
 //Wenn die Maus zum letzten Punkt bewegt wird, muss count auf 0 geändert werden, sonst wird count++ in doStart() ausgeführt und count wird zu 9, was außerhalb der Grenzen liegt, if (count == 8) {
  Anzahl = 0;
 }
 }

 /*
 Für die Beziehung zwischen i, count und x in show(x):
  ich = [0,7];
  x = [1,8];
  Anzahl = [1,8];
 */
 //Klicken Sie auf die linke Schaltfläche, um das Bild nach links zu wechseln function doLeftClick() {
 für (var i = 0; i < imglist.length; i++) {
  //Ermitteln, welches Bild aktuell angezeigt wird if (imglist[i].style.display == "block") {
  wenn (i == 0) {
   zeigen(8);
   // Wenn dieser Satz vergessen wird, wird break direkt beendet. Wenn die linke Taste bis zum äußersten rechten Punkt gedrückt wird, wird Punkt 1 ignoriert und direkt zu Punkt 2 gesprungen
   Anzahl = 0;
   //Sicherstellen, dass der Schalter 3 Sekunden lang ist. doStop();
   start();
   brechen;
  }
  zeigen(i);
  Anzahl = i;
  //Sicherstellen, dass der Schalter 3 Sekunden lang ist. doStop();
  start();
  brechen;
  }
 }
 }

 //Klicken Sie auf die rechte Schaltfläche, um das Bild nach rechts zu verschieben. Funktion doRightClick() {
 für (var i = 0; i < imglist.length; i++) {
  //Ermitteln, welches Bild aktuell angezeigt wird if (imglist[i].style.display == "block") {
  wenn (i == 7) {
   anzeigen(1);
   Anzahl = 1;
   macheStopp();
   start();
   brechen;
  }
  zeigen(i + 2);
  Anzahl = i + 2;
  //Es erfolgt kein Wechsel in den Zustand ohne Bild if (count >= 8) {
   Anzahl = 0;
  }
  macheStopp();
  start();
  brechen;
  }
 }
 }

 start();
 //Die standardmäßig geöffnete Seite zeigt das erste Bild an// (Wenn es nicht hinzugefügt wird, leuchtet der erste Kreis auf, was bedeutet, dass die linke Taste nicht reagiert, wenn die Seite gerade geöffnet wird)
 macheBewegung(1);
</Skript>