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データベース操作の基本コマンド

推薦する

Dockerfile における ENV 命令の具体的な使用法の詳細な説明

1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...

Vueはスクロールロードテーブルを実装します

目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...

CSS の 6 つの重要なセレクター (3 秒で覚える)

出典: https://blog.csdn.net/qq_44761243/article/deta...

MySQL例外に対する一般的な解決策をいくつか分析する

目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...

Javascriptのtry catchの2つの機能についてお話しましょう

プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...

CSSフィルターにはどんな魔法の用途があるか

背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...

EChartsマウスイベント処理方法の詳細な説明

イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...

Webpack4プラグインの実装原理についての簡単な説明

目次序文知る練習すれば完璧になる序文wabpack では、ローダーの他にプラグインがコア機能です。プ...

Docker のタイムゾーンの問題とデータ移行の問題

最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...

要素タイムラインの実装

目次コンポーネント - タイムラインカスタムノードスタイルカスタムタイムスタンプコンポーネント - ...

MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決

この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...

backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...

Springboot および Vue プロジェクトの Docker デプロイメントの実装手順

目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...

IE アドレスバーのアイコン表示問題を解決する 3 つの手順

<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...

Dockerのデフォルトネットワークセグメントの正しい変更手順

背景同僚がセキュリティ プロジェクトに取り組んでおり、AWS サーバーに秘密兵器を展開する必要があり...