jquery がシームレスなカルーセル効果を実現する方法について話しましょう

シームレスなカルーセル画像は、現在 Web デザインで非常に人気のある表示方法であり、ユーザーに優れた視覚体験をもたらすことができます。 jQuery は、シームレスなカルーセルを簡単に実装するのに役立つ、非常に一般的に使用される JavaScript ライブラリです。

1. HTML 構造

まず、画像を表示するための ul リストを作成する必要があり、各 li タグ内に対応する画像があります。

<div>
  <ul>
    <li><img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="jquery がシームレスなカルーセル効果を実現する方法について話しましょう" ></li>
    <li><img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="jquery がシームレスなカルーセル効果を実現する方法について話しましょう" ></li>
    <li><img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="jquery がシームレスなカルーセル効果を実現する方法について話しましょう" ></li>
    <li><img  src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="jquery がシームレスなカルーセル効果を実現する方法について話しましょう" ></li>
  </ul>
</div>

これは HTML の基本構造です。次に、見た目を美しくするために CSS スタイルを追加する必要があります。

2. CSS スタイル

CSS ファイルでは、画像が 1 行で表示されるように ul のスタイルを display:flex に設定する必要があります。また、すべての画像が同じ行に配置されるように、各 li の幅と高さを設定する必要があります。同時に、画像のオーバーフローを隠すために、ul の外側レイヤーにマスクレイヤーを追加する必要もあります。

.slider{
  overflow:hidden;
  position:relative;
}
ul{
  display:flex;
  width:400%;
  position:relative;
  left:0;
  margin:0;
  padding:0;
  transition:left 1s;
}
li{
  flex-basis:25%;
  margin:0;
  padding:0;
}

ここでの flex-basis 属性は、u​​l リスト全体に対する各 li タグの幅の割合を設定するために使用されます。

3. JavaScript の実装

JS ファイルでは、jQuery を使用して画像カルーセルを制御する必要があります。まず、カルーセル間隔を制御するタイマーを設定する必要があります。次に、タイマーにアニメーションを追加して、すべてのピクチャの左の値を値だけデクリメントします。これにより、UL リスト全体がピクチャの幅だけ左に移動します。最後のピクチャに到達したら、すぐに最初のピクチャにジャンプする必要があります。つまり、ul リスト全体の左の値を 0 に調整します。

$(document).ready(function(){
  var timer=setInterval(autoplay,3000);
  function autoplay(){
    var imgWidth=$("li").width();
    $("ul").animate({left:"-="+imgWidth},1000,function(){
      var firstImg=$("li:first-child");
      $("ul").append(firstImg);
      $("ul").css("left",0);
    });
  }
})

このコードでは、まず jQuery の width() メソッドを通じて各画像の幅を取得し、次に animate() メソッドを使用してアニメーション効果を実現します。 ul リストの左の値から画像の幅を引いた値を設定し、最初の li タグをコールバック関数の ul リストの最後に挿入して、ul リスト全体の左の値を 0 に調整してシームレスなカルーセルを実現します。効果。

4. 概要

上記の手順により、jQuery を使用して単純なシームレスなカルーセル画像を実装できます。もちろん、CSS3 アニメーションや他の JavaScript フレームワークの使用など、他にも多くの実装方法があります。ただし、どの方法を使用する場合でも、シームレスなカルーセルを実現するための核心は、JS を使用して画像の動きのアニメーションを制御し、カルーセルが最後の画像に到達したときに論理的な問題を処理することです。

以上がjquery がシームレスなカルーセル効果を実現する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。