ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript/jQuery を使用して無限画像ループ スライダーを作成するにはどうすればよいですか?
この記事では、Infinity-Image-Loop- を構築するための、読みやすさ、コードの再利用性、優れたコーディング方法などのベスト プラクティスについて説明します。 JavaScript/jQueryを使用したWebサイトのスライダー。焦点は、無限ループ スライダーの錯覚を作成するために画像を配置する方法にあります。
無限画像スライダーを作成する簡単な方法の 1 つは次のとおりです。ループ内でスライドさせる「n」個の画像があり、最初の画像が n 番目の画像の後に続き、その逆も同様です。最初と最後のイメージのクローンを作成し、次の操作を実行します。
画像の数に関係なく、挿入する必要があるのは最大 2 つのクローン項目だけです。
すべての画像が幅 100 ピクセルで、オーバーフローのあるコンテナ内に表示されると仮定します。 hidden、display: inline-block、white-space: nowrap を使用すると、画像を保持するコンテナを簡単に一列に整列させることができます。
n = 4 の場合、DOM 構造は次のようになります。
offset(px) 0 100 200 300 400 500
images | 4c | 1 | 2 | 3 | 4 | 1c
/* ^^ ^^
[ Clone of the last image ] [ Clone of the 1st image ]
*/
最初、コンテナは左: -100px に配置され、最初の画像が表示されます。画像を切り替えるには、最初に選択した CSS プロパティに JavaScript アニメーションを適用します。
付属のフィドルはこの効果を示しています。以下に使用する基本的な JavaScript/jQuery コードを示します。
$(function() {
var gallery = $('#gallery ul'),
items = gallery.find('li'),
len = items.length,
current = 1, /* the item we're currently looking */
first = items.filter(':first'),
last = items.filter(':last'),
triggers = $('button');
/* 1. Cloning first and last item */
first.before(last.clone(true));
last.after(first.clone(true));
/* 2. Set button handlers */
triggers.on('click', function() {
var cycle, delta;
if (gallery.is(':not(:animated)')) {
cycle = false;
delta = (this.id === "prev")? -1 : 1;
/* in the example buttons have id "prev" or "next" */
gallery.animate({ left: "+=" + (-100 * delta) }, function() {
current += delta;
/**
* we're cycling the slider when the the value of "current"
* variable (after increment/decrement) is 0 or when it exceeds
* the initial gallery length
*/
cycle = (current === 0 || current > len);
if (cycle) {
/* we switched from image 1 to 4-cloned or
from image 4 to 1-cloned */
current = (current === 0)? len : 1;
gallery.css({left: -100 * current });
}
});
}
});
});
このソリューションは比較的簡単で効率的であり、必要な追加の DOM 挿入操作は 2 つだけであり、他のソリューションと比較してシンプルなループ管理ロジックが必要です。 -looping slider.
別のアプローチが存在する可能性もありますが、この方法は無限ループ スライダーを作成するための実用的で効果的なソリューションを提供します。
以上がJavaScript/jQuery を使用して無限画像ループ スライダーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。