この記事では、左ボタンと右ボタンをクリックすることで画像を切り替える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)
<br />元のアドレス: http://andymao.com/andy/post/8...
Windows システム向け MySQL インストール チュートリアルダウンロード1. https:...
1: 文字列を区切るためのストアドプロシージャを定義する 区切り文字 $$ `mess`$$ を使う...
この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...
序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...
ルーティングとは何ですか?ルーティングとは、相互接続されたネットワークを介して送信元ステーションから...
序文以前フロントエンドを勉強していたとき、メタタグに対する私の理解はこの一文だけでした。 <メ...
注:この記事は他の人によって翻訳されていますが、考えるべき点が多く、理解しにくい点もあると感じていま...
目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...
目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...
序文Linux カーネルでは、元のコードとの互換性を保つため、または特定の仕様に準拠するため、また現...
序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...
目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...
最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...