jQuery画像切り替えアニメーション効果

アイデア: 誰もが淘宝網やその他のウェブサイトを訪れたことがあると思いますが、通常、画像アニメーションの切り替え効果はどのように実現されますか?ブロガーとしての私のスキルはあまり良くないので、簡単な例を作りました！

まず、通常、画像には左の切り替えボタンと右の切り替えボタンの 2 つの画像ボタンがあります。左の切り替えボタンをクリックすると、元の画像が右に XX ピクセル移動し、画像が右に移動します。左側のボタンがボックス内に表示されますが、元の画像は非表示になります。右側のスイッチ ボタンをクリックする原理は、左側のボタンと同様です。しかし、同じボタンをクリックし続けると、もともと画像切り替えボックスに画像が 3 枚しかない場合、最後の画像に到達した時点で判断して最初または最後の画像に戻す必要があります。アイデアを分析した後、コードを見てみましょう:

1. HTML コード

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img  src="0.jpg"/ alt="jQuery画像切り替えアニメーション効果" ></div>
    <div class="img"><img  src="1.jpg"/ alt="jQuery画像切り替えアニメーション効果" ></div>
    <div class="img"><img  src="3.jpg"/ alt="jQuery画像切り替えアニメーション効果" ></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>

divBox は画像を表示するボックスです

imgBox はすべての画像をラップする DIV です。 DIV 以上です

bth は、画像を切り替えるための 2 つのボタンを配置します

2. CSS コード

#divBox{
height:315px;
width:750px;
position:absolute;
border:#000000 1px solid;
overflow:hidden;}
 
#imgBox{
position:absolute;
width:2550px;}
 
.img{
float:left;}
 
#bth{
margin-left:800px;}

#divBox は、画像表示ボックスの幅、高さ、絶対位置、境界線を設定します。もう 1 つの重要な属性はオーバーフローです。 . 、オーバーフローの非表示、この DIV の内容がこの DIV のサイズを超えると、オーバーフロー部分が非表示になります。

#imgBox 絶対位置と幅を設定します。この幅は、すべての画像の幅の合計に依存します。ここでは 3 つの画像があり、幅が指定されていない場合は、それぞれの画像の幅が 750 ピクセルになります。内部の小さな DIV は左にフロートできません。

.img は左にフロートするように設定されているため、すべての写真が左にフロートし、水平線上に留まります。

#bth マージンを設定します。上の div は絶対位置を持っているため、div が覆われて見えなくなるため、div を外側に移動します。

3. スクリプト コード

$(function(){
  //定义一个变量保存距离左边的位置
  var leftNum=0;
  $("#zou").click(function(){
    if(leftNum==0){
      //移动到最后一张图片
      $("#imgBox").animate({left:leftNum=-1500},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum+750},500);
    }
     
  });
   
  $("#you").click(function(){
    if(leftNum==-1500){
      //移动到第一张图片
      $("#imgBox").animate({left:leftNum=0},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum-750},500);
    }
     
  });
});

ヒント: jQuery パッケージをインポートすることを忘れないでください

スクリプト コード 2 つのクリック イベントを作成し、左への距離を保存するプロパティ leftNum を定義しました

まず、以下を見てください。左のスイッチ ボタンのクリック イベント: ボタンをクリックすると、まず leftNum が 0 であるかどうかを判断します。0 の場合、それは最初の画像です。最初の画像の左側に画像がない場合はどうすればよいですか。画像の場合、アニメーション効果を実現するために animate メソッドを呼び出します。 left が 0 の場合、それが -1500 になるのはなぜでしょうか。画像の場合、左が -750 の場合は 2 番目の画像となり、左が -1500 の場合は 3 番目の画像となるため、最後の画像の位置 = - (画像の幅) X (合計) となります。写真の枚数）-1。 leftNum が 0 でない場合は、元の値に 750px を追加します。

右スイッチボタンの原理は左スイッチボタンの原理と似ているので、あまり説明しません。

4. 要約:

それを理解した友達は自分でも実践できます。結局のところ、実践すれば真実が明らかになります。

もっと美しいものを作りたい場合は、私にプライベートメッセージを送ってください。ドットをクリックすると、画像上にいくつかのドットが追加されるなど、まだ説明していない機能もあります。を選択すると、アニメーションが対応する画像に切り替わります。また、画像カルーセル効果を設定して、数秒ごとに画像を切り替えることもできます。

ボタンに関しては、写真の左右に写真ボタンを追加することもでき、より美しくなります