ネイティブ js カプセル化シームレスカルーセル機能

(関数(ウィンドウ、未定義) {
 
 // 要素のCSS属性値を取得する function getCss(elem, attr) {
  elem.currentStyle を返しますか? 
   要素.currentStyle[属性]: 
   window.getComputedStyle(要素、null)[属性];
 }
 
 // 文字列から数字以外の部分を削除します（負の符号は除く）。function toInt(str) {
  var rex = /[^0-9]/ig;
  Numberを返します((str[0] === '-' && str[1] !== '=') ? '-' + str.replace(rex, '') : str.replace(rex, ''));
 }
 
 // アニメーション関数をカプセル化します。パラメータ: dom オブジェクト、css 属性値オブジェクト、アニメーション実行時間、アニメーション完了後のコールバック function animation(elem, params, speed, callback) {
  (var param in params) の場合 {
   (関数(パラメータ) {
    
    var elemValue = toInt(getCss(elem, param))、
     ターゲット値 = toInt(params[param])、
     currentDis = 要素値、
     単位 = params[param].substr(params[param].indexOf('[A-Za-z]+') - 1);
    
    パラメータ[パラメータ].長さ>2の場合{
     var prefix = params[param].substr(0, 2);
     
     if (プレフィックス === '+=')
      ターゲット値 = 要素値 + ターゲット値;
     そうでない場合 (プレフィックス === '-=')
      ターゲット値 = 要素値 - ターゲット値;
    }
    
    var dis = (targetValue - elemValue) / 速度、
     sizeFlag = ターゲット値 < 要素値;
    
    var タイマー = setInterval(関数() {
     
     要素の値 = toInt(getCss(要素、パラメータ));
     
     if (サイズフラグ) {
      (現在のDis <= ターゲット値)の場合{
       タイマーの間隔をクリアします。
       elem.style[param] = ターゲット値 + 単位;
      } それ以外 {
       現在のDis + = dis;
       elem.style[param] = currentDis + 単位;
      }
     }
     それ以外 {
      (現在のDis >= ターゲット値)の場合{
       タイマーの間隔をクリアします。
       elem.style[param] = ターゲット値 + 単位;
      } それ以外 {
       現在のDis + = dis;
       elem.style[param] = currentDis + 単位;
      }
     }
    }, 1);
    
   })(パラメータ);
  }
  
  if (typeof コールバック === 'function')
   折り返し電話（）;
 };
 
 
 // カルーセル配列を右に移動する function rightRoundArrayMove() {
  
  var winsLen = wins.length;
  var lastWin = wins[winsLen - 1];
  
  (var i = winsLen - 1; i > 0; i--) の場合 
   勝利[i] = 勝利[i - 1];
  
  勝利数[0] = 最後の勝利;
 }
 
 // 左に回転する function rightRound(time) {
  
  右ラウンド配列移動();
  
  wins.forEach(関数(win, インデックス) {
   (インデックス === 0) ? 
    win.style.left = インデックス * winWidth - winWidth + 'px' :
    アニメーション(win, {left: '+=' + winWidth + 'px'}, time ? time : animationTime);
  });
 }
 
 //右に回転する function leftRound(time) {
  
  var winsLen = wins.length;
  var firstWin = wins[0];
  
  (var i = 0; i < winsLen - 1; i++) の場合
   勝利[i] = 勝利[i + 1];
   
  勝利数[勝利数Len - 1] = firstWin;
  
  wins.forEach(関数(win, インデックス) {
   (インデックス === wins.length - 1) ? 
    win.style.left = インデックス * winWidth - winWidth + 'px' :
    アニメーション(win, {left: '-=' + winWidth + 'px'}, time ? time : animationTime);
  });
 }
 
 
 var 
  // wins、btns、sbtnsはコンストラクタパラメータwinsを保存するために使用されます。 
  ボタン、 
  sbtns、 
  // ウィンドウ幅 winWidth,
  // 遷移アニメーション時間（ミリ秒）、デフォルトは 100
  アニメーション時間 = 100、
  // ボタンをクリックして間隔を回転します clickInterval = animationTime << 2,
  // 自動回転タイマー、タイマー間隔、右に回転するかどうかを保存する autoRoundTimer、
  q間隔、
  そうですね、
  //スライドコンストラクター、パラメーター: ウィンドウ配列、ボタン配列、サイドボタン配列 slide = function(wins, btns, sbtns) {
   新しい slide.prototype.init(wins, btns, sbtns) を返します。
  };
  
 
 スライド.プロトタイプ = {
  
  // ウィンドウ要素を初期化する init: function(awins, abtns, asbtns) {
   
   もし (!awins)
    throw new Error('ウィンドウ配列は空にできません。');
   
   wins = Object.values(awins)、btns = abtns、sbtns = asbtns;
   
   // ウィンドウが3つ未満の状況を処理する if (wins.length === 1) {
    var winParent = wins[0].parentNode;
    var winHTML = wins[0].outerHTML;
    winParent.innerHTML + = winHTML + winHTML;
    wins = Object.values(winParent.children);
   }
   そうでない場合 (wins.length === 2) {
    var winParent = wins[0].parentNode;
    winParent.innerHTML += wins[0].outerHTML + wins[1].outerHTML;
    wins = Object.values(winParent.children);
   }
   
   winWidth = wins[0].offsetWidth;
   
   wins.forEach(関数(win, インデックス) {
    win.style.position = '絶対';
    win.index = インデックス;
   });
   
   右ラウンド配列移動();
   
   wins.forEach(関数(win, インデックス) {
    win.style.left = インデックス * winWidth - winWidth + 'px';
   });
  },
  
  // 遷移アニメーション時間を設定する setAnimationTime: function(time) {
   アニメーション時間 = 時間;
   クリック間隔 = アニメーション時間 << 2;
  },
  
  // 自動回転、パラメータ: 回転時間間隔、右回転するかどうか autoRound: function(interval, isRight) {
   autoRoundTimer = setInterval(関数() {
        isRight ? rightRound() : leftRound();
       }, 間隔);
   qinterval = 間隔;
   右向き矢印
  },
  
  // サイドボタンのクリック、パラメータはサイドボタン要素の配列で、コンストラクタで渡すことも、すぐに渡すこともできます。sideBtnClickRound: function(sabtns) {
   
   var leftBtn = sabtns ? sabtns[0] : sbtns[0],
    rightBtn = sabtns ? sabtns[1] : sbtns[1];
   
   var isclick = true;
   leftBtn.onclick = 関数（）{
    if(isclick) {
     isclick=false;
     右丸め();
     setTimeout(関数() { 
      クリック = true;
     }, クリック間隔);
    }
   };
   
   rightBtn.onclick = 関数（）{
    if(isclick) {
     isclick=false;
     左ラウンド();
     setTimeout(関数() {
      クリック = true;
     }, クリック間隔);
    }
   };
  },
  
  // 通常のボタンクリック、パラメータ: 通常のボタン配列、コールバック btnsClickRound: function(abtns, callback) {
   
   var ibtns = abtns ? abtns : btns;
   
   var isclick = true;
   
   ibtns.forEach(関数(btn, インデックス) {
    btn.onclick = 関数() {
     if(isclick) {
      isclick=false;
      
      if (typeof コールバック === 'function')
       コールバック(ibtns、btn、インデックス);
      
      var poor = index - wins[1].index;
      var count = Math.abs(poor);
      （悪い<0）の場合{
       var absPoor = count;
       var タイマー = setInterval(関数() {
        console.log((absPoor + 1))
           rightRound(アニメーション時間 / (absPoor + 2));
           ((--count) === 0 の場合) 
            タイマーの間隔をクリアします。
          }, アニメーション時間);
      }
      そうでない場合（poor > 0）{
       var タイマー = setInterval(関数() {
           leftRound(アニメーション時間 / (poor + 2));
           ((--count) === 0 の場合) 
            タイマーの間隔をクリアします。
          }, アニメーション時間);
      }
      
      setTimeout(関数() {
       クリック = true;
      }, クリック間隔 << 1);
     }
    }
   });
  },
  
  // マウスを移動させて自動回転をキャンセルするように設定します。パラメータ: 移動する要素、移動する要素のコールバック、移動する要素のコールバック setOverStop: function(box, overCallback, outCallback) {
   box.onmouseover = 関数(e) {
    自動ラウンドタイマーの間隔をクリアします。
    
    if (typeof overCallback === 'function')
     オーバーコールバック(e);
   }
   box.onmouseout = 関数(e) {
    slide.prototype.autoRound(qinterval, qisRight);
    
    if (typeof outCallback === 'function')
     アウトコールバック(e);
   }
  }
 }
 
 slide.prototype.init.prototype = slide.prototype;
 window.slide = _slide = スライド;
 
}）（ウィンドウ）;

onload = 関数() {
 
 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); // カルーセルオブジェクトを作成します。パラメータ: ウィンドウDOM配列、下部ボタンDOM配列（オプション）、
 s.autoRound(2000); // 自動回転を設定します s.setAnimationTime(200); // 遷移アニメーション時間を設定します s.setOverStop(box); // マウスが要素内に入ったときに自動回転を停止するように設定、パラメータ: 移動した DOM 要素、移動した要素のコールバック、移動した要素のコールバック s.sideBtnClickRound(); // サイドボタンをクリックしたときの回転を設定します、パラメータ: ボタンの DOM 配列 (オプション)
 s.btnsClickRound(); // 下のボタンがクリックされたときの回転を設定します。パラメータ: ボタン DOM 配列 (オプション)、コールバック}

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   * {
    マージン: 0;
    パディング: 0;
   }
   
   li {
    リストスタイル: なし;
   }
   
   。箱 {
    幅: 1000ピクセル;
    高さ: 400px;
    マージン: 20px 自動;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    位置: 相対的;
    オーバーフロー: 非表示;
   }
   
   .box > * {
    位置: 絶対;
   }
   
   .サイドボタン{
    幅: 継承;
    高さ: 100px;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    zインデックス: 2;
   }
   
   .side-btns > div {
    幅: 50px;
    高さ: 継承;
    テキスト配置: 中央;
    行の高さ: 100px;
    フォントサイズ: 18px;
    背景色: rgba(0, 0, 0, .3);
    色: 白;
    カーソル: ポインタ;
    ユーザー選択: なし;
   }
   
   .btns{
    幅: 継承;
    高さ: 20px;
    ディスプレイ: フレックス;
    コンテンツの端揃え: flex-end;
    zインデックス: 2;
    位置: 絶対;
    下: 20px;
   }
   
   .btns > li {
    幅: 16px;
    高さ: 16px;
    境界線の半径: 50%;
    右マージン: 12px;
    カーソル: ポインタ;
    背景色: rgba(0, 0, 0, .2);
   }
   
   .勝つ {
    幅: 継承;
    高さ: 継承;
    ディスプレイ: フレックス;
   }
   
   .wins > li {
    幅: 継承;
    高さ: 継承;
    フレックス成長:0;
    フレックス収縮:0;
   }
  </スタイル>
  <script src="js/slide.js"></script>
  <script src="js/test.js"></script>
 </head>
 
 <本文>
  <div class="box">
   <div class="side-btns">
    <div class="left-btn">&lt;</div>
    <div class="right-btn">&gt;</div>
   </div>
   
   <ul class="btns">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   
   <ul class="勝つ">
    <li style="background-color: anti-white;">あ</li>
    <li style="background-color: アクアマリン;">b</li>
    <li style="background-color: green;">c</li>
    <li style="background-color: brown;">d</li>
   </ul>
  </div>
 </本文>
</html>