この記事では、左ボタンと右ボタンをクリックすることで画像を切り替えるjQueryの具体的なコードを例として紹介します。具体的な内容は次のとおりです。 右側のボタンをクリックすると画像が左に移動し、左側のボタンも同様に移動します。 CSSスタイルはここでは省略されています...直接JSコードに進んでください <div class="down-down-div"> <div class="pics-frame"> <div class="frame-first"> <!--最初の div --> <div id="left_btn" class="pic-button-left"> <!--“ < ” ボタン--> <div style="padding-top: 70px;"> < </div> </div> </div> <!--2 番目の div --> <div class="frame-second"> <div class="frame-second-up"> <div style="float: left;font-size: 10px;"> このモデルに適した高級アクセサリー: </div> </div> <div class="frame-second-down"> <div class="frame-second-down-down"> <!--画像ギャラリー--> <div class="frame-second-down-uppics"> <img id="img0" style="幅: 100%;高さ: 100%;" src="./images/accessories/t500.png" /> </div> <!--テキスト--> <div class="frame-second-down-downtext"> マッドガード </div> <div class="frame-second-down-down"> <!--画像ギャラリー--> <div class="frame-second-down-uppics"> <img id="img1" style="幅: 100%;高さ: 100%;" src="./images/accessories/t501.png" /> </div> <!--テキスト--> <div class="frame-second-down-downtext"> サイドワイパー</div> </div> <div class="frame-second-down-down"> <!--画像ギャラリー--> <div class="frame-second-down-uppics"> <img id="img2" style="幅: 100%;高さ: 100%;" src="./images/accessories/t502.png" /> </div> <!--テキスト--> <div class="frame-second-down-downtext"> ナンバープレートウィンドウトリムフレーム</div> </div> <div class="frame-second-down-down"> <!--画像ギャラリー--> <div class="frame-second-down-uppics"> <img id="img3" style="幅: 100%;高さ: 100%;" src="./images/accessories/t600.png" /> </div> <!--テキスト--> <div class="frame-second-down-downtext"> カーペット(7席) </div> </div> </div> </div> <!--3 番目の div --> <div id="right_btn" class="frame-third"> <!--“ > ” ボタン --> <div class="pic-button-right"> <div style="padding-top: 70px;"> > </div> </div> </div> </div> </div> <!--隠し画像コレクション--> <div id="imgs"> <img src="images/accessories/t500.png" style="display: none;" /> <img src="images/accessories/t501.png" style="display: none;" /> <img src="images/accessories/t502.png" style="display: none;" /> <img src="images/accessories/t600.png" style="display: none;" /> <img src="images/accessories/t602.png" style="display: none;" /> <img src="images/accessories/t603.png" style="display: none;" /> <img src="images/accessories/t604.png" style="display: none;" /> <img src="images/accessories/t605.png" style="display: none;" /> <img src="images/accessories/t606.png" style="display: none;" /> <img src="images/accessories/t607.png" style="display: none;" /> <img src="images/accessories/t608.png" style="display: none;" /> </div> $(関数() { var 画像 = []; var imgs = $("#imgs 画像"); var インデックス = 0; //表示される画像の長さは4です var displayLength = $(".frame-second-down img").length; for(var i = 0; i < imgs.length; i++) { 画像.push(imgs[i]); } //アルバムの左ボタン $("#left_btn").click(function() { if(インデックス == 0) { alert("すでに最初の写真です!"); 戻る; } それ以外 { for(var j = 0; j < 表示長さ; j++) { $("#img" + j).attr("src", 画像[index - 1 + j].src); } 索引 - ; } }) //アルバムの右側のボタン $("#right_btn").click(function() { if(index == (imgs.length - displayLength)) { alert("これが最後の写真です!"); 0を返します。 } それ以外 { for(var j = 0; j < 表示長さ; j++) { $("#img" + j).attr("src", 画像[j + 1 + インデックス].src); } インデックス++; } }) }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します
>>: MySQL設定ファイルを変更できない問題の解決方法(Win10)
目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...
非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...
背景同社のサーバーはすべて Alibaba Cloud ECS ホストを購入しています。デフォルトの...
MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...
序文Linux システムのパフォーマンスを監視するために使用できるオープンソースの監視ツールが市場に...
目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...
序文今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラ...
目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...
目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...
1. プリコンパイルの利点私たちは皆、プリコンパイル機能を備えた JDBC の PreparedSt...
目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...