JQueryカルーセルエフェクト実装プロセス分析

JQueryカルーセルエフェクト実装プロセス分析_jquery

WBOY

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

オリジナル

1186 人が閲覧しました

カルーセルは、jquery を学習する際に実装される 2 番目のアニメーションであり、学習に最も時間がかかるアニメーションでもあります。カルーセルを実装する過程では、常にさまざまな問題に遭遇します。私は多くの人に相談し、Guan Niang に何度も尋ねました。今日は、カルーセルをすぐに作成できるとは大胆に言いません。私の思考プロセスの一部をエッセイとして記録したいと思います。

最初は html 構造、単純なカルーセル、単一の画像のシームレスなカルーセルで、主に 3 つの層に分かれています: div>ul>li、および li 内の img 画像。

次に、css スタイル: div 固定幅と高さ、オーバーフロー: 非表示; ul の幅は動的に取得することをお勧めします (次のステップは li については、float の使用に慣れています)。、ul 上で順番に配置できるように、float をクリアすることを忘れないでください (クリア: 両方)。

重要なのは jquery メソッドで、主に使用されるメソッドは animate()、setInterval()、hover() です。メソッドを記述する前に、動的な効果のロジックを明確にしましょう。画像はループ内で右から左にスライドし、最後の画像がスライドすると最初の画像が表示されます。

1. 長さと幅の li の数を取得します

var len=$('li').length,
  liWidth=$('li').width,

ログイン後にコピー

シームレスなカルーセルなので、画像が最後の画像にスライドするとき、3 番目の画像に自然に移行するにはどうすればよいでしょうか。最後の部分の後に 1 つの部分だけで問題ないため、最初の部分を複製して li

の最後に追加する必要があります。

$('li:first').clone().appendTo('ul')
2. ul の幅を取得します。ul の幅は、すべての li の幅にクローン化された li の幅を加えたものに等しくなります

ulWidth=liWidth*(len+1)
準備ができたようなので、次に彼を動かしてみましょう。最初に思い浮かぶのは animate() メソッドです。

animate(properties [, period ] [, easing ] [, complete ] ),

最初のパラメータのプロパティ: CSS 属性と値オブジェクト。上下または左右のアニメーションの効果を決定します。

2 番目のパラメーターの継続時間: アニメーションが完了するまでの時間、デフォルトは 400、単位はミリ秒です。

3 番目のパラメータイージング: アニメーションの遷移に使用されるイージング関数。デフォルトはスイング (リニア、スイング) です。このパラメータは通常は使用されません。

4 番目のパラメーター complete: アニメーションの完了後に実行される操作を指します。

私たちのアニメーションは右から左なので、ul のマージン左の値を変更することで実現できます

$('ul').animate({
  'marign-left': -liWidth*index
},3000,function(){
  if(index==len){
   index=0;
   $('ul').css({'margin-left':'0px'})
  } 
})

ログイン後にコピー

インデックスは li のインデックス値を指します。li のインデックス値が li の長さの値と等しい場合、つまりアニメーションが最後のピクチャまで実行された場合、ul の margin-left を直接設定します。 0 と li のインデックス値も 0 になります。

これには別の隠れた危険がありますが、それについては今は触れません。

次のステップでは、マウスが div から離れると、画像が自動的に再生されます。これは、hover() と setInterval() を使用するためです

setInterval() は、W3C によって次のように説明されています。指定された期間 (ミリ秒単位) に従って関数を呼び出すか、式を計算します。この関数は、clearInterval() が呼び出されるかウィンドウが閉じるまで継続的に呼び出されます。

var autoPlay;
$('div').hover(function(){
  clearInterval(autoPlay); 
},function(){
  autoPlay=setInterval(function(){

$('ul').animate({

'marign-left': -liWidth*index
},3000,function(){
  if(index==len){
   index=0;
   $('ul').css({'margin-left':'0px'})；
　　　　index++;
  } 
});
}，3000) 
}).trigger('mouseleave');

ログイン後にコピー

このように、自動再生機能が実装されているようですが、最初のフレームが少し長く残るようなバグも見つかりました。

この問題は昨日解決しましたが、最後のピクチャを実行するとすぐにインデックスが0になり、その後2回実行されることになるため、この判定ではインデックスが0のときに1を加える必要があります。、index++を判定条件に入れます。

昨日発見した別の問題があります。このカルーセルには 2 つの時間があり、1 つはアニメーションの実行時間であり、もう 1 つは再生時間です。その理由は、前者の時間が後者の時間よりも小さい必要があるためです。実行順序が上から下にある場合、時間が一致している場合、または後者の時間が前者よりも小さい場合、この時間差内ではアニメーションは判定条件に入ることができずに再生が継続されるため、カルーセルは失敗します。今日はここまでです。次回共有するときは、左右の矢印とホバードットのカルーセル効果を追加します。

完全なコードを添付します:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>轮播</title>
  <style>
    body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;}
    body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;}
    input,select,textarea{font-size:100%;}
    .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;}
    .clearfix{*zoom:1;}
    .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;}
    .pic-list{height: 400px;}
    .pic-list li{float: left; width: 1920px; height: 400px;}
   </style>
</head>
<body>
  <div class="big-screen">
    <ul class="pic-list clearfix">
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
    </ul>
  </div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ul=$('.pic-list'),
      li=ul.find('li'),
      liW=li.outerWidth(true),
      liLen=li.length,
      index=0,
      autoPlay;
    li.first().clone().appendTo(ul);
    ul.css({'width':liW*(liLen+1),'margin-left':-liW*index});
    function play(){
      if(!ul.is('animated')){
        ul.stop().animate({
          'margin-left':-liW*index
        },480,function(){
          if(index>liLen){
            index=0;
            ul.css({'margin-left':-liW*index});
            index++;
          }
        });
      }
    }
    $('.big-screen').hover(function(){
      clearInterval(autoPlay);
    },function(){
      autoPlay=setInterval(function(){
        play();
        index++;
      },500)
    }).trigger('mouseleave');

})
</script>
</html>

ログイン後にコピー

上記は、あなたに共有された jquery カルーセル効果の完全なコードです。あなたの学習に役立つことを願っています。