シームレスなカルーセルを実現するjQueryプラグイン

シームレスカルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>シームレスなカルーセルを作成する</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   * {
    マージン: 0;
    パディング: 0;
    ユーザー選択: なし;
   }

   #div {
    境界線: 1px 実線のライトグレー;
    幅: 600ピクセル;
    高さ: 300px;
    マージン: 20px;
    オーバーフロー: 非表示;
   }
   。アイテム {
    境界線: 1px 実線のライトグレー;
    幅: 96%;
    高さ: 50px;
    マージン: 10px 自動;
   }
  </スタイル>
 </head>
 <本文>
  <div id="div">
   <div class="rollbox"></div>
  </div>
 </本文>
</html>
<スクリプト>
 $(ドキュメント).ready(関数() {
  (var i = 0; i < 7; i++) の場合 {
   var $item = $("<div class='item'>" + i+ "</div>");
   $item.appendTo($("#div .rollbox"));
  }
 })
 //カルーセルアクション$(function() {
  $("#div").roll(1);
 })

 $.prototype.roll = 関数(スパン) {
  span = span == undefined ? 20 : span; //スクロール速度 var $that = $(this).find('.rollbox');
  var インデックス = 0;
  var t = setInterval(関数() {
   $that.css('margin-top', インデックス + 'px');
   索引 - ;
   チェック（）;
  }, スパン)
  //
  $that.mouseenter(関数() {
   クリア間隔(t);
  })
  $that.mouseleave(関数() {
   t = setInterval(関数() {
    $that.css('margin-top', インデックス + 'px');
    索引 - ;
    チェック（）;
   }, スパン)
  })
  関数チェック(){
   var first = $that.children().first();
   var top = parseInt(first.css('margin-top').replace('px',''));
   var bottom = parseInt(first.css('margin-bottom').replace('px',''));
   var height =first.height();
   bw = parseInt(first.css('border-width').replace('px',''));
   var temp = インデックス+上部+高さ+下部;
   if(temp==top-2*bw){
    var last = $that.children().last();
    最後.後(最初);
    $that.css('margin-top','0px');
    インデックス=0;
   }
  }
 }
</スクリプト>

アイデアの説明

最初は要素を直接アニメーション化するつもりでしたが、途中でのねじれや曲がりが少し面倒だったので、すべての子要素をラップする補助コンテナーを用意し、この補助コンテナーを上下に動かすようにしました。
つまり、補助コンテナをゆっくりと上に動かすと、すでにスクロール効果があります。次に、上部のコンテナが完全に非表示になっているかどうかを判断し、補助コンテナをリセットして上部の要素を下部に配置します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: