Native JS-Kapselung, nahtlose Karussellfunktion

(Funktion(Fenster, undefiniert) {
 
 // Den CSS-Attributwert des Elements abrufen function getCss(elem, attr) {
  elem.currentStyle zurückgeben? 
   elem.currentStyle[attr] : 
   window.getComputedStyle(elem, null)[attr];
 }
 
 //Entferne Nicht-Ziffern aus dem String, ausgenommen negative Vorzeichen function toInt(str) {
  var rex = /[^0-9]/ig;
  return Zahl((str[0] === '-' && str[1] !== '=') ? '-' + str.replace(rex, '') : str.replace(rex, ''));
 }
 
 // Kapsele die Animationsfunktion, Parameter: Dom-Objekt, CSS-Attributwert-Objekt, Ausführungszeit der Animation, Rückruf nach Abschluss der Animation Funktion Animation (Element, Parameter, Geschwindigkeit, Rückruf) {
  für (var param in params) {
   (Funktion(Parameter) {
    
    var elemValue = toInt(getCss(elem, param)),
     Zielwert = toInt(Params[Param]),
     currentDis = Elementwert,
     Einheit = Params[Param].substr(Params[Param].indexOf('[A-Za-z]+') - 1);
    
    wenn (Params[Param].Länge > 2) {
     var Präfix = Params[Param].substr(0, 2);
     
     wenn (Präfix === '+=')
      Zielwert = Elementwert + Zielwert;
     sonst wenn (Präfix === '-=')
      Zielwert = Elementwert – Zielwert;
    }
    
    var dis = (Zielwert - Elementwert) / Geschwindigkeit,
     Größenflagge = Zielwert < Elementwert;
    
    var Timer = Intervall setzen(Funktion() {
     
     elemValue = toInt(getCss(elem, param));
     
     if (GrößeFlag) {
      wenn (aktuellerDis <= Zielwert) {
       Intervall löschen(Timer);
       elem.style[param] = Zielwert + Einheit;
      } anders {
       aktuelleDis += dis;
       elem.style[param] = currentDis + unit;
      }
     }
     anders {
      wenn (aktuellerWert >= Zielwert) {
       Intervall löschen(Timer);
       elem.style[param] = Zielwert + Einheit;
      } anders {
       aktuelleDis += dis;
       elem.style[param] = currentDis + unit;
      }
     }
    }, 1);
    
   })(Parameter);
  }
  
  wenn (Typ des Rückrufs === 'Funktion')
   Rückruf();
 };
 
 
 // Verschiebe das Karussell-Array nach rechts Funktion rightRoundArrayMove() {
  
  var winsLen = wins.Länge;
  var letzterGewinn = Gewinne[Gewinnlänge - 1];
  
  für (var i = winsLen - 1; i > 0; i--) 
   Siege[i] = Siege[i - 1];
  
  wins[0] = letzterSieg;
 }
 
 // Nach links drehen Funktion rightRound(time) {
  
  rightRoundArrayMove();
  
  wins.forEach(Funktion(win, Index) {
   (Index === 0)? 
    win.style.left = Index * Fensterbreite - Fensterbreite + 'px':
    Animation (Gewinn, {links: '+=' + Gewinnbreite + 'px'}, Zeit? Zeit: Animationszeit);
  });
 }
 
 //Nach rechts drehen Funktion leftRound(time) {
  
  var winsLen = wins.Länge;
  var firstWin = gewinnt[0];
  
  für (var i = 0; i < winsLen - 1; i++)
   Siege[i] = Siege[i + 1];
   
  gewinnt[Gewinnlänge - 1] = ersterGewinn;
  
  wins.forEach(Funktion(win, Index) {
   (Index === Gewinne.Länge - 1)? 
    win.style.left = Index * Fensterbreite - Fensterbreite + 'px':
    Animation (Gewinn, {links: '-=' + Gewinnbreite + 'px'}, Zeit? Zeit: Animationszeit);
  });
 }
 
 
 var 
  // wins, btns, sbtns werden verwendet, um den Konstruktorparameter wins zu speichern, 
  btns, 
  sbtns, 
  // Fensterbreite winWidth,
  // Übergangsanimationszeit (Millisekunden), Standard ist 100
  Animationszeit = 100,
  // Klicken Sie auf die Schaltfläche, um das Intervall zu drehen clickInterval = animationTime << 2,
  // Speichert den Auto-Rotationstimer, das Timerintervall und ob nach rechts gedreht werden soll autoRoundTimer,
  qIntervall,
  qisRichtig,
  //Folienkonstruktor, Parameter: Fensterarray, Schaltflächenarray, seitliches Schaltflächenarray Folie = Funktion (gewinnt, btns, sbtns) {
   gib eine neue Folie zurück.prototype.init(wins, btns, sbtns);
  };
  
 
 Folie.Prototyp = {
  
  // Fensterelemente initialisieren init: function(awins, abtns, asbtns) {
   
   wenn (!awins)
    throw new Error('Das Fenster-Array darf nicht leer sein.');
   
   Gewinne = Objekt.Werte(awins), btns = abtns, sbtns = asbtns;
   
   // Behandeln Sie die Situation, in der weniger als 3 Fenster vorhanden sind, if (wins.length === 1) {
    var winParent = wins[0].parentNode;
    var winHTML = wins[0].outerHTML;
    winParent.innerHTML += winHTML + winHTML;
    gewinnt = Objekt.Werte(winParent.children);
   }
   sonst wenn (gewinnt.Länge === 2) {
    var winParent = wins[0].parentNode;
    winParent.innerHTML += gewinnt[0].outerHTML + gewinnt[1].outerHTML;
    gewinnt = Objekt.Werte(winParent.children);
   }
   
   Gewinnbreite = Gewinne[0].Offsetbreite;
   
   wins.forEach(Funktion(win, Index) {
    win.style.position = "absolut";
    win.index = index;
   });
   
   rightRoundArrayMove();
   
   wins.forEach(Funktion(win, Index) {
    win.style.left = Index * Fensterbreite – Fensterbreite + „px“;
   });
  },
  
  // Stelle die Übergangsanimationszeit ein setAnimationTime: function(time) {
   Animationszeit = Zeit;
   Klickintervall = Animationszeit << 2;
  },
  
  // Automatische Rotation, Parameter: Rotationszeitintervall, ob nach rechts gedreht werden soll autoRound: function(interval, isRight) {
   autoRoundTimer = setzeIntervall(Funktion() {
        istRechts? RechtsRund() : LinksRund();
       }, Intervall);
   qinterval = Intervall;
   qisRight = istRechts;
  },
  
  // Klick mit seitlicher Taste, der Parameter ist das Array mit den Elementen der seitlichen Taste, das im Konstruktor übergeben werden kann oder jetzt übergeben werden kann sideBtnClickRound: function(sabtns) {
   
   var leftBtn = sabtns ? sabtns[0] : sbtns[0],
    rightBtn = sabtns ? sabtns[1] : sbtns[1];
   
   var isclick = true;
   leftBtn.onclick = Funktion () {
    wenn(istklick) {
     istclick=false;
     rechtsRund();
     setzeTimeout(Funktion() { 
      istklick = wahr;
     }, Klickintervall);
    }
   };
   
   rightBtn.onclick = Funktion () {
    wenn(istklick) {
     istclick=false;
     linkeRunde();
     setzeTimeout(Funktion() {
      istklick = wahr;
     }, Klickintervall);
    }
   };
  },
  
  // Normaler Schaltflächenklick, Parameter: normales Schaltflächenarray, Rückruf btnsClickRound: Funktion (abtns, Rückruf) {
   
   var ibtns = abtns? abtns: btns;
   
   var isclick = true;
   
   ibtns.forEach(Funktion(btn, Index) {
    btn.onclick = Funktion() {
     wenn(istklick) {
      istclick=false;
      
      wenn (Typ des Rückrufs === 'Funktion')
       Rückruf (ibtns, btn, Index);
      
      var schlecht = index - gewinnt[1].index;
      var Anzahl = Math.abs(schlecht);
      wenn (schlecht < 0) {
       var absPoor = Anzahl;
       var Timer = Intervall setzen(Funktion() {
        console.log((absPoor + 1))
           rightRound(Animationszeit / (absPoor + 2));
           wenn ((--count) === 0) 
            Intervall löschen(Timer);
          }, Animationszeit);
      }
      sonst wenn (schlecht > 0) {
       var Timer = Intervall setzen(Funktion() {
           linkeRunde(Animationszeit / (schlecht + 2));
           wenn ((--count) === 0) 
            Intervall löschen(Timer);
          }, Animationszeit);
      }
      
      setzeTimeout(Funktion() {
       istklick = wahr;
      }, Klickintervall << 1);
     }
    }
   });
  },
  
  //Maus auf Einfahren einstellen und automatische Drehung abbrechen, Parameter: das einzufahrende Element, der Callback des einzufahrenden Elements, der Callback des auszufahrenden Elements setOverStop: function(box, overCallback, outCallback) {
   box.onmouseover = Funktion(e) {
    : ClearInterval(autoRoundTimer);
    
    wenn (Typ von overCallback === 'Funktion')
     überCallback(e);
   }
   box.onmouseout = Funktion(e) {
    Folie.Prototype.AutoRound(qinterval, qisRight);
    
    wenn (Typ von outCallback === 'Funktion')
     outCallback(e);
   }
  }
 }
 
 Folie.prototype.init.prototype = Folie.prototype;
 Fenster.Slide = _Slide = Folie;
 
})(Fenster);

onload = Funktion() {
 
 var wins = document.querySelectorAll('.wins > li');
 var btns = document.querySelectorAll('.btns > li');
 var sideBtns = document.querySelectorAll('.side-btns > div');
 var box = document.querySelector('.box');
 
 var s = slide(wins, btns, sideBtns); // Ein Karussellobjekt erstellen, Parameter: Fenster-Dom-Array, unteres Button-Dom-Array (optional),
 s.autoRound(2000); // Automatische Rotation einstellen s.setAnimationTime(200); // Übergangsanimationszeit einstellen s.setOverStop(box); // Automatischen Rotationsstopp einstellen, wenn die Maus in das Element hineinbewegt wird, Parameter: hineinbewegtes DOM-Element, Rückruf des hineinbewegten Elements, Rückruf des herausbewegten Elements s.sideBtnClickRound(); // Rotation einstellen, wenn auf die Seitentaste geklickt wird, Parameter: Button-DOM-Array (optional)
 s.btnsClickRound(); // Legt die Drehung fest, wenn auf die Schaltfläche unten geklickt wird, Parameter: Button-Dom-Array (optional), Rückruf}

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <style type="text/css">
   * {
    Rand: 0;
    Polsterung: 0;
   }
   
   li {
    Listenstil: keiner;
   }
   
   .Kasten {
    Breite: 1000px;
    Höhe: 400px;
    Rand: 20px automatisch;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Position: relativ;
    Überlauf: versteckt;
   }
   
   .box > * {
    Position: absolut;
   }
   
   .side-btns {
    Breite: erben;
    Höhe: 100px;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Z-Index: 2;
   }
   
   .side-btns > div {
    Breite: 50px;
    Höhe: erben;
    Textausrichtung: zentriert;
    Zeilenhöhe: 100px;
    Schriftgröße: 18px;
    Hintergrundfarbe: rgba(0, 0, 0, .3);
    Farbe: weiß;
    Cursor: Zeiger;
    Benutzerauswahl: keine;
   }
   
   .btns {
    Breite: erben;
    Höhe: 20px;
    Anzeige: Flex;
    Inhalt ausrichten: Flex-Ende;
    Z-Index: 2;
    Position: absolut;
    unten: 20px;
   }
   
   .btns > li {
    Breite: 16px;
    Höhe: 16px;
    Randradius: 50 %;
    Rand rechts: 12px;
    Cursor: Zeiger;
    Hintergrundfarbe: rgba(0, 0, 0, .2);
   }
   
   .gewinnt {
    Breite: erben;
    Höhe: erben;
    Anzeige: Flex;
   }
   
   .wins > li {
    Breite: erben;
    Höhe: erben;
    Flex-Wachstum: 0;
    Flex-Schrumpfen: 0;
   }
  </Stil>
  <script src="js/slide.js"></script>
  <script src="js/test.js"></script>
 </Kopf>
 
 <Text>
  <div Klasse="Box">
   <div Klasse="side-btns">
    <div class="left-btn">&lt;</div>
    <div class="right-btn">&gt;</div>
   </div>
   
   <ul Klasse="btns">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   
   <ul Klasse="gewinnt">
    <li style="Hintergrundfarbe: Antikweiß;">a</li>
    <li style="Hintergrundfarbe: Aquamarin;">b</li>
    <li style="Hintergrundfarbe: grün;">c</li>
    <li style="Hintergrundfarbe: braun;">d</li>
   </ul>
  </div>
 </body>
</html>