jQuery は、画像を切り替えるための左ボタンと右ボタンのクリックを実装します。

jQuery は、画像を切り替えるための左ボタンと右ボタンのクリックを実装します。

この記事では、左ボタンと右ボタンをクリックすることで画像を切り替える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;">
   &nbsp;&nbsp;&nbsp;このモデルに適した高級アクセサリー:
  </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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryを使用して、左ボタンと右ボタンをクリックすることでスライド切り替えを実装します。
  • jQueryをベースに左右のボタンをクリックすることで画像切り替え効果を実現する
  • インデックスボタンと自動カルーセル切り替え特殊効果コード共有を備えたjQuery
  • jQuery スライドショーの特殊効果コード共有スイッチは、マウスがボタンの上に移動したときに切り替わります (2)
  • jQuery スライドショー特殊効果コード共有スイッチはマウスがボタンをクリックしたとき (1)
  • jQueryプラグインをベースに、左右のボタンとタイトルテキスト画像切り替え効果を作成します。
  • jQuery はアニメーション効果の非表示と表示、入力ボックスの文字数の動的な減少、ナビゲーション ボタンの切り替えを実装します。
  • jQuery は、フォーカス画像の切り替えスクロール効果を制御するための左右のボタンを備えた QQ Mall を模倣します。
  • jQueryはシンプルなボタンの色の変更を実装します

<<:  LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します

>>:  MySQL設定ファイルを変更できない問題の解決方法(Win10)

推薦する

MySQL の自動インクリメント主キーが連続していないのはなぜですか?

目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

Dockerのデフォルトネットワークセグメントを変更する実装方法の分析

背景同社のサーバーはすべて Alibaba Cloud ECS ホストを購入しています。デフォルトの...

MySQLのページング制限のパフォーマンス問題についての簡単な説明

MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...

フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。

目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...

フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...

Bash スクリプトを使用して Linux のメモリ使用量を監視する方法

序文Linux システムのパフォーマンスを監視するために使用できるオープンソースの監視ツールが市場に...

RHCE ブリッジング、パスワード不要のログイン、ポート番号の変更の概要

目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...

ネイティブ JS を使用してタッチスライド監視イベントを実装する方法

序文今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラ...

ab ツールを使用してサーバー上で API ストレス テストを実行します。

目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...

1 つの記事で MySQL のプリコンパイルを理解する

1. プリコンパイルの利点私たちは皆、プリコンパイル機能を備えた JDBC の PreparedSt...

Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...