ドットイメージカルーセルのjQuery実装例の共有

画像の左下のラベル（または中央の小さな点）をクリックすると、ページ上の指定された位置に実装された画像が自動的に左右に切り替わり、対応する画像に切り替わります。次に、この記事では、jQuery を使用してドット イメージのカルーセル効果を実現するサンプル コードを紹介します。必要な方は参考にしていただければ幸いです。

画像カルーセル効果:

画像はページ上の指定された位置で自動的に左右に切り替わり、効果はシームレスです

画像の左下のラベル (または小さな点) をクリックします。中央) 対応する画像に切り替えます;

画像の左側と右側をクリックしてラベルを切り替えます;

全体的なアイデア:

------ ------------------------ ------------------------ ------------------------ -----------

自動カルーセル: 同じ高さの大きな p を配置します。表示枠に画像素材を配置するための表示枠として、jqueryを通して大きなpに画像素材を入れます。 animate()メソッドは、表示枠の絶対位置に対する大きなpの左の値と変化時間を次のように変更します。画像のスライドを実現します。setInterval() メソッドを使用してタイマーを設定し、自動再生効果を実現します。最初の画像は最後の画像と同じでなければなりません。最後の画像では、大きな p ボックスの左側を初期値として設定し、画像と同じインデックスを持つ変数を 1 (2 番目の画像) に設定します。これにより、シームレスな連続スライド効果が実現されます。

---- -------------------------------------- ------------------------ ------------------------

ラベルをクリックして対応する画像に切り替えます: をクリックして画像の li タグを切り替えて追加しますマウスクリックイベントがある場合は、まずそれをクリアします。 $(this).Index() を使用して、現在クリックされている画像のシリアル番号 (インデックス) を取得し、大きな p の左の値を設定します。同時に、現在の li タグに暗い色の明白な効果を設定し、イベントにカウントダウンを設定することを忘れないでください。マウスをクリックした後、一定時間他の操作が実行されると、自動再生タイマーが復元されます

------------------------- ------------------------ ------------------------ --------

左または右のラベルをクリックして、前/次の画像に切り替えます。このラベルは、ラベルの効果が向上します (選択したページが青色になるのを防ぐため)。これは生成の目的が画像オブジェクトではなくラベルを左右に切り替えることであるため、現時点では $(this).Index() を使用することはできません。上記の変数がピクチャ インデックスと同じであることを覚えていますか? 最初からグローバル変数として設定する必要があり (rcd という名前を付けました)、その値は同等なので、ピクチャと li タグと一緒にバインドされます。左または右のラベルをクリックする前に、rcd 変数に現在の画像のシリアル番号が格納されているため、これは使用できませんが、右にスライドする画像番号を見つけることができます。 /左にスワイプすると、大きなpが移動する位置が分かり、rcd-1==-1のとき、pの位置を左下のラベルの表示状態に設定します。最後のピクチャが表示される位置を指定し、最後から 2 番目のピクチャに対応する番号を rcd に設定します。rcd+1 が最後のピクチャより 1 大きい場合、p の位置を最初のピクチャに設定します。 、 rcd を 2 番目の画像に対応する番号に設定します。

---------------------------- ------ ---------------------------------------- --

コードは次のように実装されます:

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>  //引入jquery (css代码未贴)
  <script type="text/javascript">
    $(function(){
        var rcd=0;       //代表图片和li标签编号的全局变量
//       滑动函数
        function slide(){   
          rcd++;
          if(rcd==4){    //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;0&#39;});
            rcd=1;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;    //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和p left值的关系
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //设定left
          if (rcd==3) {    //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})      //不是最后一张那么就正常执行
          }
        }
//       设定定时器,开始轮播
        var timer = setInterval(slide,2000);
        var st;    //声明倒计时函数变量名
//       绑定li鼠标点击事件
        $(&#39;#fix ul li&#39;).click(function(){
          clearInterval(timer);     //清除定时器(同下一行)
          clearTimeout(st);
          var rcd = $(this).index();   //获得点击的li的编号
          var dis =rcd*(-1210)+&#39;px&#39;;   //获得该编号对应的p的left值
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},500)  //开始运动
          $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})     //设置当前li样式,其他li变为初始值
          st = setTimeout(function(){   //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
            timer = setInterval(slide,2000);
          },3000)
        }); 
//       左图标点击事件
        $(&#39;#fix .lt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          rcd--;     //点击前的编号-1
          if(rcd==-1){  //如果rcd减后值为-1,那么将p的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;-3630px&#39;});
            rcd=2;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //运动
          if (rcd==3) {     //与前面相同
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       右图标点击事件
        $(&#39;#fix .rt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          slide();     //右图标点击一次与滑动函数一致
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       给#fix p加鼠标移入事件
        $(&#39;#fix&#39;).mouseenter(function(){     
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;block&#39;});  //鼠标移入时,向左向右图标显示
        })
//       给#fix p加鼠标移出事件
        $(&#39;#fix&#39;).mouseleave(function(){
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;none&#39;});   //鼠标移出时,向左向右图标隐藏
        })
    })
  </script>
  </head>
  <body>
    <p id="fix">
      <p id="sld">
        <img  src="轮播图/ph1.png"/ alt="ドットイメージカルーセルのjQuery実装例の共有" >
        <img  src="轮播图/ph2.jpg"/ alt="ドットイメージカルーセルのjQuery実装例の共有" >
        <img  src="轮播图/ph3.jpg"/ alt="ドットイメージカルーセルのjQuery実装例の共有" >
        <img  src="轮播图/ph1.png"/ alt="ドットイメージカルーセルのjQuery実装例の共有" >
      </p>
      <ul>
        <li style="opacity: 0.6;">iPhone6</li>
        <li>Mate9</li>
        <li>vivo X9</li>
      </ul>
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img  src="轮播图/left.png"/ alt="ドットイメージカルーセルのjQuery実装例の共有" ></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img  src="轮播图/right.png"/ alt="ドットイメージカルーセルのjQuery実装例の共有" ></a>
    </p>
  </body>

みんなは学びましたか?急いで試してみてください。

関連する推奨事項:

ブートストラップ画像カルーセル効果を実装する方法

JS を使用して画像カルーセルを実装する例

JQuery を使用して画像カルーセル効果を実装する

以上がドットイメージカルーセルのjQuery実装例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。