シームレスなカルーセルを実現する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 で知らない Object.entries の使い方

目次序文1. 共通オブジェクトを反復処理するには for...of を使用します2. 通常のオブジェ...

HTML ページジャンプコード

次のコードを index.html などのデフォルトのホームページ ファイルとして保存し、ルート デ...

XHTML Web ページ チュートリアル

<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...

DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

MySqlデータベースの基礎知識のまとめ

目次基本的なデータベース操作2) データベースを表示する3) データベースを選択する4) データベー...

LinuxでIPアドレスが表示されない問題の解決方法

目次序文解決:ステップ1ステップ2序文環境: VMware Workstation 上に Linux...

HTML テーブル データを Json 形式に変換するサンプル コード

<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...

MySQL データベース JDBC プログラミング (Java は MySQL に接続します)

目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...

HTML 基本構造_Powernode Java アカデミー

多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィック...

Linux で MySQL スケジュールタスクを実装する方法

前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...

VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする

1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...

CocosCreator でカメラトラッキングに cc.follow を使用する方法

Cocos Creator バージョン: 2.3.4デモのダウンロード: https://files...

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...

JS 日付コントロール My97DatePicker の基本的な使い方

My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...