画像をジャンプさせる JavaScript 画像カルーセル効果_JavaScript スキル-jsチュートリアル-php.cn

画像をジャンプさせる JavaScript 画像カルーセル効果_JavaScript スキル

WBOY

リリース： 2016-05-16 15:15:16

オリジナル

1669 人が閲覧しました

画像カルーセル効果は、現在の Web サイトのトップページにはほぼ必須の効果です。そこで、この効果の簡単な実装を 3 つの側面から説明します。

画像がジャンプします
ピクチャーシーケンス制御の実装
前後ボタンコントロールの実装

今回は、間隔に応じて切り替わる写真を見てみましょう。

まず構造コードを完成させましょう。詳細は説明しませんが、その効果を見てみましょう。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

ログイン後にコピー

さて、JS を介して画像ジャンプを制御しましょう。

まず、画像の位置を見つける必要があります。ここでは、レイアウトに ul を使用するため、まず UL の下の LI の数を見つける必要があります。

次に、ウィンドウモードを使用します。#slider はウィンドウ、ul は窓の外の風景、ul は水平方向に配置されます。

次に、外の風景が窓のサイズで表示されます。つまり、各画像が毎回窓の風景として使用されます。ここでは、画像のサイズが窓と同じサイズになるように制御されます。

上記はレイアウト処理の概念を説明しています。次に、画像の表示間隔を変更するには、JS の setInterval または setTimeout を使用します (これは簡単に取得できるため)。 )

ジャンプするたびにULの位置の左を制御し、ULの下の景色が毎回異なって表示されるようにします。この左はウィンドウの幅に応じて決定されます。は -800 * 0、2 番目は -800*1、3 番目は -800*2...というように、次のコードが得られます

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

ログイン後にコピー

JS コードは次のように非常に単純です。ここでは 2 秒間のジャンプシーケンスを設定し、ジャンプ数が画像の数以上になったら最初の画像に戻ります。