カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果は図の通りです

コードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  
  <スタイル タイプ="text/css">
   
   * {
    パディング: 0;
    マージン: 0;
   }
   。容器 {
    位置: 相対的;
    幅: 600ピクセル;
    高さ: 300px;
    マージン: 30px 自動;
    オーバーフロー: 非表示;
   }
       。左 {
     表示: なし;
     位置: 絶対;
     上位: 50%;
     左: -20px;
     変換: translateY(-50%);
     幅:50px;
     高さ: 50px;
     境界線の右上の半径: 50%;
     境界線の右下の半径: 50%;
     背景色: rgba(0,0,0,0.5);
     zインデックス: 999;
    }
    .左 i {
    表示: ブロック;
       上マージン: 10px;
    左マージン: 20px;
    幅: 30ピクセル;
    高さ: 30px;
    背景: url(img/left.png) 繰り返しなし;
    背景サイズ: 30px 30px;
    }
   。右 {
    表示: なし;
    位置: 絶対;
    上位: 50%;
    右: -20px;
    変換: translateY(-50%);
    幅:50px;
    高さ: 50px;
    左上の境界線の半径: 50%;
    左下の境界線の半径: 50%;
    背景色: rgba(0,0,0,0.5);
    zインデックス: 999;
   }
   .right i {
     表示: ブロック;
     上マージン: 10px;
     右マージン: 20px;
     幅: 30ピクセル;
     高さ: 30px;
     背景: url(img/right.png) 繰り返しなし;
     背景サイズ: 30px 30px;
    }
   
   ウル リ、オル リ {
    リストスタイル: なし;
   }
   。写真 {
    位置: 絶対;
   }
   .リスト{
    位置: 絶対;
    下: 10px;
    左: 10px;
   }
      .list li {
    フロート: 左;
    右マージン: 10px;
    幅: 10px;
    高さ: 10px;
    境界線の半径: 10px;
    背景色: rgba(0,0,0,0.5);
    カーソル: ポインタ;
   }
   .list .current {
    背景色: #fff;
   }
   .picture li {
    位置: 絶対;
    幅: 600ピクセル;
    高さ: 300px;
   }
   画像 {
    幅: 100%;
    高さ: 100%;
   }
   
  </スタイル>
 </head>
 <本文>
  <div class="コンテナ">
   <span class="left"><i></i></span>
   <span class="right"><i></i></span>
   <ul class="picture">
    <li><img src="img/1.jpg" ></li>
    <li><img src="img/2.jpg" ></li>
    <li><img src="img/3.jpg" ></li>
    <li><img src="img/4.jpg" ></li>
    <li><img src="img/5.jpg" ></li>
   </ul>
   <ol class="リスト">
   </ol>
  </div>
  <script type="text/javascript">
   var picture = document.querySelector('.picture');
   var list = document.querySelector('.list');
   var 数値 = 0;
   var 円 = 0;
   (i=0;i<picture.children.length;i++) の場合
   {   
    // 画像の位置を設定します。 picture.children[i].style.left = i*600 + 'px';
    // 順序付きリストを自動的に生成します var li = document.createElement('li');
    li.setAttribute('index',i);
    
    リストに追加される子要素は li です。
    // liにクリックイベントを追加します li.addEventListener('click',function () {
     (var i=0;i<list.children.length;i++) の場合 {
      list.children[i].className = '';
     }
     this.className = '現在の';
     var index = this.getAttribute('index');
     num = インデックス;
     円 = インデックス;
     アニメーション化(画像、インデックス*600);
    })
   }
   // 最初の子要素のクラス名を設定します。list.children[0].className = 'current';
   var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var コンテナ = document.querySelector('.container');
   // マウスがイベントコンテナから離れるように設定します。addEventListener('mouseover',function () {
    left.style.display = 'ブロック';
    right.style.display = 'ブロック';
    クリアインターバル(タイマー)
    タイマー = null;
   })
   コンテナ.addEventListener('mouseleave',関数() {
    left.style.display = 'なし';
    right.style.display = 'なし';
    タイマー = setInterval(関数() {
     右クリック();
    },1000);
   })
   
   // js アニメーション関数 function animate (obj, target, callback) {
    クリア間隔(obj.timer) 
    obj.timer = setInterval(関数() {
     var ステップ = (ターゲット - obj.offsetLeft)/10;
     ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);
     if(obj.offsetLeft == ターゲット) {
      タイマー間隔をクリアします。
      if (コールバック) {
       折り返し電話（）;
      }
     }
     obj.style.left = obj.offsetLeft + ステップ + 'px';
    },15)
   }
   
   var first = picture.children[0].cloneNode(true);
   picture.appendChild(最初の);
   picture.lastChild.style.left = (picture.children.length-1)*600 + 'px';
   // 右クリック eventright.addEventListener('click',function () {
    num ==picture.children.length-1の場合{
     画像スタイル左 = 0;
     数値 = 0;
    }
    数値++;
    アニメーション(画像、-num*600);
    円++;
    （円 == リストの子の長さ）の場合{
     円 = 0;
    }
    
    (var i = 0;i<list.children.length;i++) の場合 {
     list.children[i].className = '';
    }
    list.children[circle].className = 'current';
   })
   // 左クリックイベント left.addEventListener('click',function () {
    数値==0の場合{
     picture.style.left = -(picture.children.length-1)*600 +'px';
     num = picture.children.length-1;
    }
    数値--;
    アニメーション(画像、-num*600);
    丸  - ;
    （円<0）の場合{
     円 = リストの子の長さ-1;
    }
    
    (var i = 0;i<list.children.length;i++) の場合 {
     list.children[i].className = '';
    }
    list.children[circle].className = 'current';
   })
   
   var タイマー = setInterval(関数 () {
    // right.click() を手動で呼び出します。
   },1000);
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: