この記事では、カルーセルマップの効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 カルーセルの左スイッチの概略図黄色のボックスはスライドを表し、スライドはすべてのスライドの親を表します。灰色のボックスはそれぞれ各スライドを表します。 <div id="スライド"> <div id="スライド"> <div></div> <div></div> <div></div> </div> </div> ステップ 1 では、まず CSS の overflow プロパティを使用して、firstDiv の背後にあるボックスを非表示にする必要があります。これを行わないと、背後にある画像が表示されてしまい、目的の効果が得られません。 ステップ 2 は、次の手順に分けることができます。 1. すべてのカルーセル画像の親スライドを左に移動する カルーセルの右切り替えの概略図rightMove の実行手順は次のとおりです。 1. 最後の息子を削除する 実装コード <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...
目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...
出典: https://blog.csdn.net/qq_44761243/article/deta...
目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...
プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...
背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
目次序文知る練習すれば完璧になる序文wabpack では、ローダーの他にプラグインがコア機能です。プ...
最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...
目次コンポーネント - タイムラインカスタムノードスタイルカスタムタイムスタンプコンポーネント - ...
この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...
単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...
目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...
<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...
背景同僚がセキュリティ プロジェクトに取り組んでおり、AWS サーバーに秘密兵器を展開する必要があり...