JavaScript が Jingdong のカルーセル効果を模倣

<本文>
 <h1>スライドショー表示</h1>
 <div id="did">

 <!-- 画像 -->
 <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>

 <!-- 左ボタンと右ボタン -->
 <div id="btn-div">
  <div id="left-btn" onclick="doLeftClick()">
  <h3> < </h3>
  </div>
  <div id="right-btn" onclick="doRightClick()">
  <h3> > </h3>
  </div>
 </div>

 <!-- ドット -->
 <div id="cir-div">
  <div onmouseover="doMove(1)"></div>
  <div onmouseover="doMove(2)"></div>
  <div onmouseover="doMove(3)"></div>
  <div onmouseover="doMove(4)"></div>
  <div onmouseover="doMove(5)"></div>
  <div onmouseover="doMove(6)"></div>
  <div onmouseover="doMove(7)"></div>
  <div onmouseover="doMove(8)"></div>
 </div>
 </div>

</本文>

<スタイル>
 * {
 マージン: 0px;
 パディング: 0px;
 }

 体 {
 背景色: rgb(255, 249, 249);
 }

 h1 {
 テキスト配置: 中央;
 パディング上部: 40px;
 色: rgba(250, 54, 129, 0.562);
 }

 ＃した {
 位置: 相対的;
 幅: 590ピクセル;
 高さ: 470ピクセル;
 マージン: 30px 自動;
 }

 #画像div {
 位置: 絶対;
 }

 #画像div 画像 {
 幅: 590ピクセル;
 表示: なし;
 カーソル: ポインタ;
 Zインデックス: -1;
 }

 /* これら 2 つの段落は省略できます */
 /* 最初の画像を表示する */
 #img-div img:最初の子 {
 表示: ブロック;
 }

 /* 最初のドットを点灯します */
 #cir-div div:最初の子 {
 背景: #fff;
 }

 #サークルdiv {
 位置: 絶対;
 /* 画像に対する相対位置 */
 左: 40px;
 下: 25px;
 }

 /* 下のドット*/
 #cir-div div {
 幅: 8px;
 高さ: 8px;
 フロート: 左;
 /* 50% は切り捨て*/
 境界線の半径: 50%;
 右マージン: 6px;
 境界線: 1px実線 rgba(0, 0, 0, .05);
 背景: rgba(255, 255, 255, .4);
 }

 #左ボタン{
 位置: 絶対;
 /* 画像に対する相対位置 */
 上位: 45%

 /*左半円ボタン*/
 幅: 27px;
 高さ: 38px;
 背景: rgba(119, 119, 119, 0.5);
 境界線の半径: 0 20px 20px 0;
 /* アニメーション効果。変更前に配置され、マウスがその上に移動すると、色がゆっくりと変化します*/
 トランジション: 背景色 0.3 秒のイーズアウト;
 }

 #右ボタン{
 位置: 絶対;
 /* 画像に対する相対位置 */
 上位: 45%
 右: 0px;

 /* 右半円ボタン */
 幅: 27px;
 高さ: 38px;
 背景色: rgba(119, 119, 119, 0.5);
 境界線の半径: 20px 0 0 20px;
 /* アニメーション効果。変更前に配置され、マウスがその上に移動すると、色がゆっくりと変化します*/
 トランジション: 背景色 0.3 秒のイーズアウト;
 }

 #左ボタン:ホバー{
 背景色: rgba(32, 32, 32, 0.5);
 カーソル: ポインタ;
 }

 #右ボタン:ホバー{
 背景色: rgba(32, 32, 32, 0.5);
 カーソル: ポインタ;
 }

 #左ボタン h3 {
 色: #fff;
 上マージン: 4px;
 左マージン: 2px;
 }

 #右ボタン h3 {
 色: #fff;
 上マージン: 4px;
 左マージン: 8px;
 }
</スタイル>

<スクリプト>
 //最初の画像を表示します。var count = 1;
 //時間 var time = null;
 //画像リスト var imglist = document.getElementById("img-div").getElementsByTagName("img");
 //ドットリスト var cirlist = document.getElementById("cir-div").getElementsByTagName("div");

 //対応する画像を表示し、対応するドットを点灯します。 function show(x) {
 (var i = 0; i < imglist.length; i++) の場合 {
  (x == i + 1)の場合{
  //画像を表示します imglist[i].style.display = "block";
  //ドットが点灯します upcirlist[i].style.backgroundColor = "#fff";
  } それ以外 {
  imglist[i].style.display = "なし";
  cirlist[i].style.background = "rgba(255, 255, 255, .4)";
  }
 }
 }

 // 時間指定カルーセル画像（3 秒ごとに画像を切り替える）
 関数doStart() {
 時間 == null の場合 {
  時間 = setInterval(関数() {
  カウント++;
  表示(カウント);
  （カウント＞＝８）の場合
   カウント = 0;
  }
  }, 3000);
 }
 }

 //カルーセルを停止する関数doStop() {
 （時間！= null）の場合{
  クリア間隔(時間);
  時間 = null;
 }
 }

 //マウスがドットに移動すると、それに応じて画像が切り替わり、移動前の次のドットではなく次のドットが点灯します。 function doMove(x) {
 表示(x);
 //count に位置を割り当てると、画像は次の画像から切り替わります。count = x;
 //マウスが最後のドットに移動したら、count を 0 に変更する必要があります。そうしないと、doStart() の count++ が実行され、count が 9 になり、範囲外になります。if (count == 8) {
  カウント = 0;
 }
 }

 /*
 show(x) の i、count、x の関係について:
  私 = [0,7];
  x = [1,8];
  カウント = [1,8];
 */
 //左ボタンをクリックして画像を左に切り替える function doLeftClick() {
 (var i = 0; i < imglist.length; i++) の場合 {
  //現在表示されている画像を判断する if (imglist[i].style.display == "block") {
  (i == 0) の場合 {
   表示(8);
   // この文を忘れると、break は直接終了します。左ボタンが右端のドットに押されると、ドット 1 は無視され、ドット 2 に直接ジャンプします。
   カウント = 0;
   //スイッチが 3 秒であることを確認します doStop();
   実行を開始します。
   壊す;
  }
  表示(i);
  カウント = i;
  //スイッチが 3 秒であることを確認します doStop();
  実行を開始します。
  壊す;
  }
 }
 }

 //右ボタンをクリックして画像を右に切り替えます function doRightClick() {
 (var i = 0; i < imglist.length; i++) の場合 {
  //現在表示されている画像を判断する if (imglist[i].style.display == "block") {
  もし (i == 7) {
   表示(1);
   カウント = 1;
   停止します。
   実行を開始します。
   壊す;
  }
  表示(i + 2);
  カウント = i + 2;
  //画像がない状況への切り替えは行われません if (count >= 8) {
   カウント = 0;
  }
  停止します。
  実行を開始します。
  壊す;
  }
 }
 }

 実行を開始します。
 // デフォルトのオープニング ページには最初の画像が表示されます // (追加されていない場合は最初の円が点灯します。これは、ページを開いたばかりのときに左ボタンが反応しないことを意味します)
 1 を移動します。
</スクリプト>