jQueryでカルーセルを行う方法-フロントエンドQ&A-php.cn

モバイルデバイスの普及に伴い、カルーセルは多くの Web サイトやアプリケーションで一般的な機能の 1 つになりました。 jQuery は広く使用されている JavaScript ライブラリであり、多くの便利で実用的なメソッドを提供し、カルーセルの開発を非常にシンプルかつ簡単にします。

次の手順では、jQuery を使用して単純なカルーセルチャートを作成する方法を示します。まず、基本的な HTML と CSS コードを準備する必要があります。

HTML コード

  
 
 
 
  Previous Next

ログイン後にコピー

CSS コード

.slider { position: relative; height: 300px; width: 600px; overflow: hidden; } .slides { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; flex-wrap: nowrap; transition: transform 0.6s ease; } .slide { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } .slide img { max-height: 100%; max-width: 100%; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; } .controls span { margin: 0 10px; cursor: pointer; }

ログイン後にコピー

上記の HTML コードには、3 つの画像を含むカルーセルがあります。画像はimgタグに保存され、各画像はslideクラス名を持つdiv要素でラップされます。カルーセルのコントロールボタンはdiv要素の下部にあり、prevおよびnextクラス名を持つspan要素によって表されます。。

CSS コードでは、カルーセルコンテナーの高さと幅を300pxと600pxに設定し、overflow: hiddenを次のように設定します。div要素が 1 つだけ表示されるようにしてください。すべてのslide要素は同じ高さを持ち、Flex レイアウトを使用して親要素内で水平にレイアウトされます。コントロールボタンは、Flex レイアウトを使用して中央に配置され、水平方向に配置されます。

これで、カルーセルコードを段階的に作成できます。

最初のステップでは、jQuery を使用してカルーセル内の関連要素を選択し、後続のコードで使用できるようにその参照を保存する必要があります。以下に示すように:

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next');

ログイン後にコピー

2 番目のステップでは、各slide要素の幅を計算し、それらを行に配置する必要があります。以下に示すように:

var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px');

ログイン後にコピー

3 番目のステップでは、コントロールボタンがクリックされたときにカルーセル画像が移動できるように、next関数とprev関数を記述する必要があります。。ここでの具体的な実装には、オフセットを計算するための複雑な数学的演算が含まれますが、animate()関数を使用して実現できます。以下に示すように:

$next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); });

ログイン後にコピー

4 番目のステップでは、next関数を時々自動的に実行するループタイマーを設定する必要があります。以下に示すように:

var interval = setInterval(function() { $next.click(); }, 3000);

ログイン後にコピー

最後のステップは、アニメーションの重なりやカルーセルエラーを防ぐために、カルーセル画像の移動中にユーザーがコントロールボタンをクリックすることを禁止することです。以下に示すように:

$slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

ログイン後にコピー

これで、簡単なカルーセルチャートが完成しました。コードスニペット全体は次のとおりです。

var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var $prev = $slider.find('.prev'); var $next = $slider.find('.next'); var slideWidth = $slide.width(); $slides.css('width', slideWidth * $slide.length + 'px'); $next.on('click', function() { $slides.animate({left: '-=' + slideWidth}, 600, function() { $slides.append($slides.find('.slide:first-of-type')); $slides.css('left', ''); }); }); $prev.on('click', function() { $slides.animate({left: '+=' + slideWidth}, 600, function() { $slides.prepend($slides.find('.slide:last-of-type')); $slides.css('left', ''); }); }); var interval = setInterval(function() { $next.click(); }, 3000); $slider.on('mouseenter', function() { clearInterval(interval); }); $slider.on('mouseleave', function() { interval = setInterval(function() { $next.click(); }, 3000); });

ログイン後にコピー

上記の手順を完了すると、独自の CSS スタイルと HTML コードを使用してカルーセルの外観と機能をカスタマイズし、Web サイトにシームレスに統合できます。。

以上がjQueryでカルーセルを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。