jqueryカルーセル画像の書き方

jquery カルーセルの実装方法: まず、配置ボックス「p.focus」を作成し、次にオーバーフローを非表示に設定し、次に JavaScript を使用して、左右をクリックしてページをめくり、画像を切り替える機能を実現します。

このチュートリアルの動作環境: Windows7 システム、jquery1。 10.0 バージョン、Dell G3 コンピューター。

推奨: 「

jquery ビデオ チュートリアル 」 「javascript 基本チュートリアル 」

カルーセル効果を実現するための jQuery

多くの電子商取引 Web サイトやポータルには、フォーカス画像を自動的に回転させる広告が含まれています。以下では、私が個人的に jQuery を使用してこの効果を実現します。

実装する必要がある主な機能は 3 つあります。
1. クリックしてページを左右に回転すると、画像が切り替わります。
2. 下のナビゲーション ボタンをクリックします。
3 マウスをエリア外に移動すると、左右のページめくりボタンが消え、画像が自動的に回転します。

HTML の書き方

まず、配置されたボックス p.focus が必要です。このボックスの幅と高さは、画像のサイズを一定に保ち、オーバーフローを非表示に設定します。画像の幅は全画像の幅の合計となり、画像の切り替えはボックスの left 属性を変更することで実現されます。最後の画像をクリックしてから次の画像をクリックすると、無限スクロール効果を実現するには最初の画像にジャンプする必要があるため、最初と最後に別の画像を追加します。

# p.focus の overflow 属性をコメントアウトすると、ページ全体に画像が並べて表示されることがわかります。

CSSの書き方

画像のleft属性を変更する必要があるため、その位置を絶対位置に設定する必要があります。左右のページ ボタンの上にマウスを置くと、その透明度が変わります。

JavaScript の書き方

まず、左右クリックでページをめくり、画像を切り替える機能を理解する必要があります。

画像の幅は 480px なので、右側の矢印をクリックすると、画像が移動します。 480px を左に移動すると、左側が 480px 減少し、左矢印をクリックすると、左側が 480px 増加します。画像は最後から最初に切り替わります。左の値は最初から -480px にリセットする必要があります。最後の画像に切り替えるときは、左の値を -2880px にリセットする必要があります。これにより、無限ループのような錯覚が生じます。

 /**
  * 这个函数用于移动图片，接收一个移动参数
  * @param dis为需要移动的距离
  */
  function move(dis){
    moving = true;    let $picture = $(".picture");    let left = parseInt($picture.css("left"));
    left += dis;
    $picture.animate({left:left},400,"linear",function(){
      if(left > -480){
        left = -2880;
      }      if(left < -2880){
        left = -480;
      }
      $picture.css("left",left + "px");
      moving = false;
    });
  }

次のステップは下のナビゲーション ボタンです。クリックすると、対応する画像に自動的に切り替わり、クリックされたボタンも強調表示されます。

 /**
  * 这个函数是用于点亮下方的几个小按钮的
  */
  function activeBtn(){
    if(index < 1){
      index = 6;
    }    if(index > 6){
      index = 1;
    }    let $cur_active = $(".button-group").find(".active");    if($cur_active.attr("index") !== index){
      $cur_active.removeClass("active");
      $(".button-group").find(&#39;[index=&#39; + index+&#39;]&#39;).addClass("active");
    }
  }

最後のステップは、自動カルーセル関数を作成することです。この関数は、上記の 2 つの関数を定期的に実行する必要があります。

 /**
  * 实现焦点图自动轮播
  */
  function autoMove(){
    index += 1;
    activeBtn();
    move(-480);
    timeoutId = setTimeout(autoMove,5000);
  }

次は、他のイベント バインディングのコードです。

let index = 1;//当前为第几张图片
  let timeoutId;  let moving = false;
  timeoutId = setTimeout(autoMove,5000);  //为左右翻页添加点击事件
  $("#left").click(function(event){
    event.preventDefault();    if(!moving){
      index -= 1;
      activeBtn();
      move(480);
    }
  });
  $("#right").click(function(event){
    event.preventDefault();    if(!moving){
      index += 1;
      activeBtn();
      move(-480);
    }
  });  //为下方按钮添加点击事件
  $(".button-group").click(function(event){
    let $target = $(event.target);    if($target.is("span")){      if(!moving){        let cur_index = parseInt($(this).find(".active").attr("index"));
        index = parseInt($target.attr("index"));
        activeBtn();
        move(-480 * (index - cur_index));
      }
    }
  });
  $(".focus").mouseenter(function(event){
    $(".arrow").css("visibility","visible");
    clearTimeout(timeoutId);//取消自动轮播
  })
  .mouseleave(function(event){
    $(".arrow").css("visibility","hidden");
    timeoutId = setTimeout(autoMove,5000);//重新设置自动轮播
  });

まとめ

特別な注意が必要な点がいくつかあります。

1. 画像を移動した後、左の値が期待値を超えているかどうかを判断し、超えたらリセットする必要があります。 2. .attr("index ") を渡します。取得されたインデックス値は文字列なので、整数に変換する必要があります。変換しないと、下のナビゲーション ボタンをクリックしたときにエラーが発生します。
3. 画像が移動している場合は、次のように設定します。 true に移動すると、他のボタンをクリックできなくなります。移動が完了したら false にリセットします。

以上がjqueryカルーセル画像の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。