シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。 効果は以下のとおりですコードセクション<!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共有キーを使用してサーバーとエージェント間の通信を暗号化します。
この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...
結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...
1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...
目次まとめ問題の説明問題を分析する問題を解決するまとめ複雑な知識をシンプルに説明できることは重要です...
今日、私は <a href="#13"></a> につい...
[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...
ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...
序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
これらの 3 つのタグを間違った方法で使用して、タイトルを表に沿わせたり、tbody の高さを固定し...
以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...
SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...
序文MySQL に精通している読者は、MySQL が非常に迅速に更新されることに気付くかもしれません...