シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。 効果は以下のとおりですコードセクション<!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。
目次序文1. 共通オブジェクトを反復処理するには for...of を使用します2. 通常のオブジェ...
次のコードを index.html などのデフォルトのホームページ ファイルとして保存し、ルート デ...
<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...
!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...
<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...
目次基本的なデータベース操作2) データベースを表示する3) データベースを選択する4) データベー...
目次序文解決:ステップ1ステップ2序文環境: VMware Workstation 上に Linux...
<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...
目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...
多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィック...
前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...
1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...
Cocos Creator バージョン: 2.3.4デモのダウンロード: https://files...
定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...
My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...