ホームページ > 記事 > ウェブフロントエンド > JSでスライディングカルーセル画像を実装するにはどうすればよいですか?

JSでスライディングカルーセル画像を実装するにはどうすればよいですか?

零下一度オリジナル: 2017-07-09 09:40:451499ブラウズ

この記事では主に左から右へのスライディングカルーセル効果のjs実装を詳しく紹介します。興味のある方は参考にしてください

カルーセルは数秒ごとに画像を自動的にスライドさせて実現します。画像が順番に再生される効果。効果に関しては、カルーセルはスライド式または段階的に行うことができます。スライド式カルーセルは、画像が左から右にスライドする効果です。段階的なカルーセルは、透明度に基づいて画像が徐々に表示される効果です。一つ目の効果を得る方法です。

原則

同じサイズの画像は列に結合されますが、1つの画像のみが表示され、残りは非表示になります。左の値を変更することで、表示される画像を変更します。

クリックして効果を表示

html部分

navはコンテナ全体、最初のULリスト #indexは小さなドットのリストで、マウスで覆われたドットがどの画像を表示します, on 小さなドットに背景色属性を追加するクラスです。2 番目の ul list #img は画像のリストです。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Carousel Figure</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
  </head>
  <body>
  <!--从左向右滑动-->
    <nav>
      <ul id="index">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul id="img">
        <li><img src="../images/img1.jpg" alt="img1"></li>
        <li><img src="../images/img2.jpg" alt="img2"></li>
        <li><img src="../images/img3.jpg" alt="img3"></li>
        <li><img src="../images/img4.jpg" alt="img4"></li>
        <li><img src="../images/img5.jpg" alt="img5"></li>
      </ul>
    </nav>
  <script src="script.js"></script>
  </body>
  </html>

CSSパート

画像サイズは720*405です。ここでは次の点に注意する必要があります:

ul#imgリストはnavに対して絶対位置、長さは#img を設定する必要があります。これは、写真を並べて表示できるようにするための、すべての写真の合計幅です。

合計コンテナーナビゲーションの幅は、写真の幅 720px、つまり 1 つだけ設定する必要があります。画像を表示でき、幅を超えた部分は非表示になります。つまり、overflow: hidden

画像リストに小さなドットのリストが表示されるはずなので、#img の z-index を -1 に設定します。小さなドットのリストは、境界線のスタイルを変更することで一連のliで構成されているため、背景色を変更するだけで小さなドットを移動する効果を得ることができます。

  *{
    margin:0;
    padding:0;
  }
  nav{
    width: 720px;
    height: 405px;
    margin:20px auto;
    overflow: hidden;
    position: relative;
  }
  #index{
    position: absolute;
    left:320px;
    bottom: 20px;
  
  }
  #index li{
    width:8px;
    height: 8px;
    border: solid 1px gray;
    border-radius: 100%;
    background-color: #eee;
    display: inline-block;
  }
  #img{
    width: 3600px;/*不给宽高无法移动*/
    height: 405px;
    position: absolute;/*不定义absolute，js无法设置left和top*/
    z-index: -1;
  }
  #img li{
    width: 720px;
    height: 405px;
    float: left;
  }
  #index .on{
    background-color: black;
  }

JSパート

絵移動関数moveElement()
moveElement関数は絵の現在位置と目標位置を取得し、その隙間を計算して移動する必要がありますが、 offsetLeft と offsetTop を使用して、画像の現在位置を取得できます。移動時に画像を「横にスワイプ」すると、距離を 10 回に分割して移動します。つまり、setTimeOut 関数を使用します。ただし、マウスのホバリングを防ぐために、clearTimeout() 関数を呼び出す必要があります。コードは次のとおりです:

  function moveElement(ele,x_final,y_final,interval){//ele为元素对象
    var x_pos=ele.offsetLeft;
    var y_pos=ele.offsetTop;
    var dist=0;
    if(ele.movement){//防止悬停
      clearTimeout(ele.movement);
    }
    if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
      return;
    }
    dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
    x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
    
    dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
    y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
    
    ele.style.left=x_pos+&#39;px&#39;;
    ele.style.top=y_pos+&#39;px&#39;;
    
    ele.movement=setTimeout(function(){//分10次移动，自调用10次
      moveElement(ele,x_final,y_final,interval);
    },interval)
  }

small ドット移動関数 moveIndex()
小さなドットを移動する原理は、まず設定された背景色のクラスを移動することです。どの li に背景色があるかを決定し、それを削除して、すべての li に背景がないようにして、現在の li に背景を追加します。

  function moveIndex(list,num){//移动小圆点
    for(var i=0;i<list.length;i++){
      if(list[i].className==&#39;on&#39;){//清除li的背景样式
        list[i].className=&#39;&#39;;
      }
    }
    list[num].className=&#39;on&#39;;
  }

写真の自動カルーセル
次のコードをwindow.onloadに直接記述します。

ここでは変数インデックスを定義する必要があります。これはインデックス（0~n-1、nはliの数）ピクチャに移動することを意味します。

  var img=document.getElementById(&#39;img&#39;);
  var list=document.getElementById(&#39;index&#39;).getElementsByTagName(&#39;li&#39;);
  var index=0;//这里定义index是变量，不是属性

  var nextMove=function(){//一直向右移动，最后一个之后返回
    index+=1;
    if(index>=list.length){
      index=0;
    }
    moveIndex(list,index);
    moveElement(img,-720*index,0,20);
  };

画像の自動カルーセルには setInterval() 関数の使用が必要です。これにより、プログラムは数秒ごとに nextMove() 関数を自動的に呼び出すことができます:

  var play=function(){
    timer=setInterval(function(){
      nextMove();
    },2500);
  };

マウスオーバーレイの小さなドット効果
マウスで覆われた小さなドットがわかっているときに、対応する画像を表示する効果を実現するには、マウスがどの小さなドットをカバーしているかを知る必要があります。ここで、値を作成するために各 li にカスタム属性インデックスを追加します。この属性の値は、対応する小さなドットのシリアル番号 i (0~n-1、n は li の数) であるため、マウスがドットをカバーするたびに、index 属性の値を取得するだけで知ることができます。マウスがカバーする小さな点。インデックス属性は変数インデックスとは関係がなく、名前が同じであるだけであることに注意してください。

  for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
    list[i].index=i;//这里是设置index属性，和index变量没有任何联系
    list[i].onmouseover= function () {
      var clickIndex=parseInt(this.index);
      moveElement(img,-720*clickIndex,0,20);
      index=clickIndex;
      moveIndex(list,index);
      clearInterval(timer);
    };
    list[i].onmouseout= function () {//移开后继续轮播
      play();
    };
  }

概要

カルーセルチャートの実装は複雑ではありません。主なことは、画像の移動動作を小さなドットの移動動作から分離することです。これにより、実装が容易になります。このカルーセル画像は、実際には、最後の画像から最初の画像にスライドするときに、スライドする距離が長いという問題があります。ここで、最終的な計算は -720* に基づいています。インデックスは、画像の動きと小さなドットの動きを結び付けるものであり、スライド方法を現在の offsetLeft+ (-720) に変更します。画像の動きはインデックスに依存しません。画像:

<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>

次に、最後の画像にスライドするときに、すぐにオフセットを 0 に割り当て、最初の画像に変更します。2 つの画像は同じです。変化が区別できないため、シームレスな接続が可能です。

りー

以上がJSでスライディングカルーセル画像を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jsの略語について次の記事：jsの略語について

続きを見る