jQueryをベースにカルーセル効果を実現する

この記事では、カルーセルマップの効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

カルーセルの左スイッチの概略図

黄色のボックスはスライドを表し、スライドはすべてのスライドの親を表します。灰色のボックスはそれぞれ各スライドを表します。

<div id="スライド">
 <div id="スライド">
 <div></div>
 <div></div>
 <div></div>
 </div>
</div>

ステップ 1 では、まず CSS の overflow プロパティを使用して、firstDiv の背後にあるボックスを非表示にする必要があります。これを行わないと、背後にある画像が表示されてしまい、目的の効果が得られません。

ステップ 2 は、次の手順に分けることができます。

1. すべてのカルーセル画像の親スライドを左に移動する
2. スライドの最初の息子を削除します
3. スライド内の息子の末尾に最初の息子を追加します。左移動効果を実現するには、左移動ボタンをクリックするたびに手順 2 を繰り返します。

カルーセルの右切り替えの概略図

rightMove の実行手順は次のとおりです。

1. 最後の息子を削除する
2. 最後の息子を頭に加える
3. スライドを右にスライド移動します（つまり、スライドの左を 0 に設定します）

実装コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8" />
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
 <meta http-equiv="X-UA-compatible" content="ie=edge" />
 <title>ドキュメント</title>
 <スタイル>
 ＃容器 {
 位置: 相対的;
 幅: 200ピクセル;
 高さ: 100px;
 背景: #000;
 オーバーフロー: 非表示;
 表示: インラインブロック;
 }
 #コンテナ .img {
 位置: 絶対;
 幅: 継承;
 高さ: 継承;
 } 
 #コンテナ .img > div {
 位置: 絶対;
 幅: 継承;
 高さ: 継承;
 色: #fff;
 }
 #コンテナ .img > div:first-child {
 左: 0;
 }
 #コンテナ .img > div:nth-child(2) {
 左: 100%;
 }
 #コンテナ .img > div:最後の子 {
 左: 200%;
 }
 #コンテナ .img > div img {
 幅: 200ピクセル;
 高さ: 100px;
 }
 </スタイル>
</head>
<本文>
 <button id="前へ"><</button>
 <div id="コンテナ">
 <div class="img">
 <div><img src="img/1.jpg"></div>
 <div><img src="img/2.jpg"></div>
 <div><img src="img/3.jpg"></div>
 </div>
 </div>
 <ボタン id="次へ">></ボタン>
 <script src="js/jquery.js"></script>
 <スクリプト>
 関数imgLeftMove() {
 $(".img").animate({
 左:"-=200"
 }, 1000, 関数() {
 // 最初の画像を削除し、画像の最後に追加します $( $(".img > div")[0] ).remove().appendTo( $(".img") );
 // divの左を0に設定する
 $( $(".img") ).css("left", "0px");
 });
 }
 
 関数imgRightMove() {
 // 最後の画像を削除し、画像ヘッダーに追加します $(".img > div").last().remove().prependTo( $(".img") );
 // div を左に -200px に設定
 $(".img").css("左", "-200px");
 $(".img").animate({
 左: "0px"
 }, 1000);
 }
 
 $("#prev").click(imgLeftMove);
 $("#next").click(imgRightMove);
 
// setInterval(imgLeftMove, 3000);
 </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: