JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells

<div id="aus">
 <ul id="imgList">
 <li><img src="pto/viele.jpg" ></li>
 <li><img src="pto/hallo.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 </ul>
</div>

*{
 Rand: 0;
 Polsterung: 0;
 }
 #aus{
  Breite: 520px;
  Höhe: 451px;
  Hintergrundfarbe: #00bcd4;
 Position: relativ;
 Rand: 50px automatisch;
 /*Überlauf: versteckt;*/
 /*Schneiden Sie die Teile aus, die wir nicht benötigen, und kommentieren Sie sie zur einfacheren Fehlerbehebung aus*/
 }

 #imgList{
  Listenstil: keiner;
  Position: absolut;
  /* links: -520px; */
 }
 #imgList li{
  schweben: links;
  Rand: 10px;
}

fenster.onload = Funktion () {
 // Dynamische UL-Länge var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";
 }//beladen

<div id="navDiv">
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
</div>

 }
 #navDiv{
  Position: absolut;
  unten: 15px;
 }
 #navDiv a{
  schweben: links;
  Breite: 15px;
  Höhe: 15px;
  Hintergrundfarbe: #89ff00;
  Rand: 0,5px;
  Deckkraft: 0,5;
 }

//Dynamisches Navigationszentrum var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 
 // Teilen Sie den verbleibenden vertikalen Abstand links und rechts der Navigation, um den Zentrierungseffekt zu erzielen. // Wenn es nicht durch zwei geteilt wird, wird es rechtsbündig ausgerichtet. // Vergessen Sie nicht die Einheit, ähm. . Vielleicht bin ich der Einzige, der navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px"; vergessen hat.

#navDiv a:hover{
  Hintergrundfarbe: rot;
  /* Mausbewegungseffekt*/
 /* Inline-Stile haben eine hohe Priorität. Achten Sie darauf, dass sie nicht überschrieben und ungültig gemacht werden.*/
 }

//Positionierungseffekt var allA = document.getElementsByTagName("a");
Var-Index = 0;
 allA[index].style.backgroundColor="schwarz";

 //Navigationseffekt anklicken //Blockebenenbereich let verwenden, sonst ist i die gleiche Zahl for(let i=0;i<allA.length;i++){
  alleA[i].onclick=Funktion () {
  imgList.style.left=-520*i+"px";

  //Inline-Styles löschen, damit die CSS-Datei wirksam werden kann allA[index].style.backgroundColor="";
  Index=i;
  allA[index].style.backgroundColor="schwarz";
  }
 }

 //Klick-Navigationseffekt for(let i=0;i<allA.length;i++){
  alleA[i].onclick=Funktion () {
  verschieben(Bildliste,-520*i,10);
  // imgList.style.left=-520*i+"px";
  //Ersetze diesen Low-Level-Übergang allA[index].style.backgroundColor="";
  Index=i;
  allA[index].style.backgroundColor="schwarz";
  }
 }
 
Funktion „move(obj,target,speed)“ {//Element; Zielposition; Geschwindigkeit//Schließe den vorherigen Timer jedes Mal, wenn ein Ereignis ausgelöst wird//Das ist der entscheidende Punkt. Sie können diesen Satz entfernen und klicken, um den Differenzeffekt nach Belieben auszuschalten. „clearInterval(obj.timer)“;
  
  var aktuell = parseInt(window.getComputedStyle(obj,null).left);
  // Aktuelle Position ermitteln // Bewegungsrichtung bestimmen if (target < current) {
  Geschwindigkeit = -Geschwindigkeit;
  }
  //Timer-Flag obj.timer = window.setInterval(function () {
  //m beginnt jedes Mal, die aktuelle Position abzurufen var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  //Bewegen und an der angegebenen Position anhalten var newValue = oldValue + speed;
  //Stoppposition anpassen. Kleine Fehler werden mit der Zeit unendlich vergrößert, wenn ((Geschwindigkeit < 0 && neuerWert < Ziel)||(Geschwindigkeit > 0 && neuerWert > Ziel)){
   neuerWert = Ziel;
  }
  imgList.style.left =neuerWert+"px";
  wenn(neuerWert == Ziel){
   Intervall löschen(Objekt.Timer);
  }

  },30);

 }

ändern();
 //Automatisches Karussell //Ein Timer wird verwendet, um die Funktion change() aufzurufen {
  setzeIntervall(Funktion () {
  Index++;
  index=index % imgArr.Länge;
  Konsole.log(imgArr.length);
  konsole.log(index);
  Verschieben (Bildliste, -520*Index, 20);
  für (lass i = 0; i <allA.length; i++) {
   alleA[i].style.backgroundColor="";
   allA[index].style.backgroundColor="schwarz";
  }
  },3000);
 }

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
 <Stil>
 *{
  Rand: 0;
  Polsterung: 0;
 }
 #aus{
  Breite: 520px;
  Höhe: 451px;
  Rand: 50px automatisch;
  Hintergrundfarbe: #00bcd4;
  Position: relativ;
  Überlauf: versteckt;
 }

 #imgList{
  Listenstil: keiner;
  Position: absolut;
 }
 #imgList li{
  schweben: links;
  Rand: 10px;
 }
 #navDiv{
  Position: absolut;
  unten: 15px;
 }
 #navDiv a{
  schweben: links;
  Breite: 15px;
  Höhe: 15px;
  Hintergrundfarbe: #89ff00;
  Rand: 0,5px;
  Deckkraft: 0,5;


 }
 #navDiv a:hover{
  Hintergrundfarbe: rot;
 /* Inline-Stile haben eine hohe Priorität und werden nach einmaligem Auslösen ungültig*/
 }

 </Stil>
</Kopf>
<Text>
<div id="aus">
 <ul id="imgList">
 <li><img src="pto/viele.jpg" ></li>
 <li><img src="pto/hallo.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 <li><img src="pto/viele.jpg" ></li>
 </ul>
 <div id="navDiv">
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 </div>
</div>
<Skript>
 fenster.onload = Funktion () {
 // Dynamische UL-Länge var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";

 //Dynamisches Navigationszentrum var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px";

 //Positionierungseffekt var allA = document.getElementsByTagName("a");
 Var-Index = 0;
 allA[index].style.backgroundColor="schwarz";

 //Klick-Navigationseffekt for(let i=0;i<allA.length;i++){
  alleA[i].onclick=Funktion () {
  Verschieben (Bildliste, -520*i, 20);
  setzeA();
  // imgList.style.left=-520*i+"px";
  // alleA[index].style.backgroundColor="";
  // Index = i;
  // alleA[index].style.backgroundColor="schwarz";
  }
 }

 // Animationseffektfunktion move(obj,target,speed,callback) {//Element; Zielposition; Geschwindigkeit; Rückruffunktion clearInterval(obj.timer);
  var aktuell = parseInt(window.getComputedStyle(obj,null).left);
  // Aktuelle Position ermitteln // Bewegungsrichtung bestimmen if (target < current) {
  Geschwindigkeit = -Geschwindigkeit;
  }
  //Timer-Flag obj.timer = window.setInterval(function () {
  //m beginnt jedes Mal, die Position abzurufen var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  //Bewegen und an der angegebenen Position anhalten var newValue = oldValue + speed;
  //Stoppposition anpassen. Kleine Fehler werden mit der Zeit unendlich vergrößert, wenn ((Geschwindigkeit < 0 && neuerWert < Ziel)||(Geschwindigkeit > 0 && neuerWert > Ziel)){
   neuerWert = Ziel;
  }
  imgList.style.left =neuerWert+"px";
  wenn(neuerWert == Ziel){
   Intervall löschen(Objekt.Timer);
   Rückruf();
  }

  },30);

 }
 ändern();
 //Automatisches Karussell //Ein Timer wird verwendet, um die Funktion change() aufzurufen {
  setzeIntervall(Funktion () {
  Index++;
  index=index % imgArr.Länge;
  verschieben(Bildliste,-520*Index,20,Funktion () {
   wenn(index>=imgArr.length-1 ){
   imgList.style.left =0;
   }
   setzeA();
  });

  },3000);
 }
 Funktion setA() {
  für (lass i = 0; i <allA.length; i++) {
  alleA[i].style.backgroundColor="";
  allA[index].style.backgroundColor="schwarz";

  }
 }
 }//beladen
</Skript>
</body>
</html>