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

シームレスなカルーセルを実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 12 種類のクラシックな白、豊かで美しいタイプ - jQuery 画像カルーセル プラグイン - フロントエンド開発に必須
  • 画像カルーセルの特殊効果を実現するためのネイティブ js と jQuery
  • 画像カルーセル効果を実現する jQuery コード (I)
  • jQuery画像カルーセルの具体的な実装
  • JQuery をベースに画像カルーセル効果を実現する (フォーカス画像)
  • 時間指定の自動カルーセル効果を実現するjQuery
  • 画像カルーセルのフェードインとフェードアウト効果を実現するためのネイティブ js と jQuery
  • jQuery はカルーセル マップを実装します。詳細な説明とサンプル コード
  • jQuery を使用して左右のカルーセル効果を記述する
  • jQueryはシームレスな左右のカルーセルを実装します

<<:  ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

>>:  MySQLのExcelへのエクスポート方法の分析

推薦する

虫眼鏡ケースのJavaScriptオブジェクト指向実装

この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...

MYSQL データベースの基礎 - 結合操作の原理

結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...

CSSスコープ(スタイル分割)の使用の概要

1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...

MySql ページングで limit+order by を使用する場合のデータ重複の解決策

目次まとめ問題の説明問題を分析する問題を解決するまとめ複雑な知識をシンプルに説明できることは重要です...

HTML要素のID属性とName属性の違い

今日、私は <a href="#13"></a> につい...

LeetCode の SQL 実装 (197. 気温上昇)

[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

Linux でプロセスを効果的に管理するための 8 つのコマンド

序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...

MySQL で特定の日、月、または年のデータをクエリするためのコードの詳細な説明

今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...

Linuxカーネルのアクセス制御セキュリティを強化する方法

背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...

nginxを使用してドメイン名ベースの仮想ホストを構成する

1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...

thead、tfoot、tbodyを使用して表を作成します

これらの 3 つのタグを間違った方法で使用して、タイトルを表に沿わせたり、tbody の高さを固定し...

PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...

MySQL エラー番号 1129 の解決方法

SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...

MySQL 8のパスワードを忘れた場合のベストな対処法の簡単な分析

序文MySQL に精通している読者は、MySQL が非常に迅速に更新されることに気付くかもしれません...