ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryでカルーセルを行う方法
モバイル デバイスの普及に伴い、カルーセルは多くの Web サイトやアプリケーションで一般的な機能の 1 つになりました。 jQuery は広く使用されている JavaScript ライブラリであり、多くの便利で実用的なメソッドを提供し、カルーセルの開発を非常にシンプルかつ簡単にします。
次の手順では、jQuery を使用して単純なカルーセル チャートを作成する方法を示します。まず、基本的な HTML と CSS コードを準備する必要があります。
HTML コード
<div class="slider"> <div class="slides"> <div class="slide"><img src="image1.jpg" alt="Slide 1"></div> <div class="slide"><img src="image2.jpg" alt="Slide 2"></div> <div class="slide"><img src="image3.jpg" alt="Slide 3"></div> </div> <div class="controls"> <span class="prev">Previous</span> <span class="next">Next</span> </div> </div>
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 サイトの他の関連記事を参照してください。