この記事では、カルーセルマップの効果を実現するための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. 構造文字列2. タプルを返す3. Dict辞書にアクセスする4. 図書館を利用する5. リ...
目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...
この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...
ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...
目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...
前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...
目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...
コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...
この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...
この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...
複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...
目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...
序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...