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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery はカルーセル マップを実装します。詳細な説明とサンプル コード
  • jQuery を使用して左右のカルーセル効果を記述する
  • jQueryはシームレスな左右のカルーセルを実装します
  • jQueryプラグインスライドでシームレスなカルーセル効果を実現
  • jQuery はカルーセル チャートを実装し、その原理の詳細を説明します。
  • jQuery アダプティブカルーセルプラグイン Swiper の使用例
  • jQueryは左右にスライドするカルーセルを実装します
  • JQuery と HTML+CSS を使用して、小さなドットと左右のボタンを備えたカルーセルを作成します。
  • jQueryで実装したシンプルなカルーセル機能【初心者向け】
  • jQuery をベースにフェードインとフェードアウト効果カルーセルを実装する

<<:  Dockerで新しいイメージを手動で構築する方法

>>:  MySQLデータベース操作の基本コマンド

推薦する

Vue3+Vite+TS は、要素プラスビジネスコンポーネントの二次カプセル化を実装します sfasga

目次1. 構造文字列2. タプルを返す3. Dict辞書にアクセスする4. 図書館を利用する5. リ...

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...

jsはシンプルなカウントダウンを実装します

この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...

Zabbix上のすべてのホストのIPとホスト名を取得する

ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...

MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...

Xshellの一般的な問題と関連する設定の詳細な説明

この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

Linux で MySQL スケジュールタスクを実装する方法

前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...

Linux と Windows でスケジュールされたタスクを設定する方法

目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...

mysqlとnavicat間の接続を確立する際の1251エラーを解決する

コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...

CSS スティッキーフッター実装コード

この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...

MySQL で単一のフィールド内の複数の値を分割および結合する方法

複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...

MySQL データベース ターミナル - 一般的な操作コマンド コード

目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...

MySQL メタデータで Hive テーブル作成ステートメントのコメント スクリプトを生成する方法

序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...