画像をクリックして切り替えるJavaScript

画像をクリックして切り替えるJavaScript

クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替えることです。ご参考までに:

HTML コードは次のとおりです。

<div class="img">
 <img src="images/1.jpg" id="myImg" class="myImg" alt="ここに 1.jpg があります">
 <p>
 <input type="button" id="pre" class="btn" value="前へ">
 <input type="button" id="next" class="btn" value="次へ">
 </p> 
</div>

CSS コードは次のとおりです。

*{
 マージン: 0;
 パディング: 0;
}
画像{
 本文:なし;
}
ボタン{
 アウトライン: なし;
 垂直位置合わせ: 中央;
}
.img{
 幅: 100%;
 左マージン: 自動;
 右マージン: 自動;
 上マージン: 20px;
 テキスト配置: 中央;
}
.myImg{
 幅: 500ピクセル;
 高さ: 300px;
}
p{
 テキスト配置: 中央;
}
p .btn{
 幅: 100ピクセル;
 高さ: 30px;
 背景: #306bbf;
 色: #fff;
 上マージン: 20px;
 下マージン: 20px;
}

JavaScript 部分:

//タグを見つける let myImg = document.getElementById("myImg");
pre = document.getElementById("pre"); とします。
次は document.getElementById("next"); です。

//画像を保存する配列を作成します。let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//配列のインデックス添え字 let index=0;
//イベント関数を定義する function preImg(event){
 索引 - ;
 //ループ切り替えを実現する if (index<0)
 {
 インデックス=arrImg.length-1;
 }
 myImg.src = arrImg[インデックス];
}
関数 nextImg(イベント){
 インデックス++;
 //ループ切り替えを実現する if (index>arrImg.length-1)
 {
 インデックス=0;
 }
 myImg.src = arrImg[インデックス];
}

pre.addEventListener('click',preImg);
next.addEventListener('click',nextImg);

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 最もシンプルな js 画像切り替え効果実装コード
  • html+css+jsで実装されたシンプルな画像切り替え効果
  • 背景画像切り替え効果を実現する Pure js コード
  • 矢印をクリックして画像を切り替えるシンプルな js コード
  • CSS画像切り替え効果コード[jsなし]
  • フラッシュなしの純粋なjs、捜狐女性チャンネルのFLASH画像切り替え効果コードを模倣
  • 画像切り替えのスライド効果を実現するJavaScriptのソースコード
  • 画像切り替え効果を実現するJavaScript
  • js マウスクリック画像切り替え効果コード共有
  • JSは画像切り替え効果を実現します

<<:  MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法

>>:  MySql エラー 1698 (28000) の解決策

推薦する

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...

MySQL における一般的なランキングの問題をいくつかまとめます

序文:一部のアプリケーション シナリオでは、成績や年齢によるランキングなど、ランキングの問題が発生す...

Linux tac コマンドの実装例

1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...

3列レイアウトを実現するCSS3フレキシブルボックスフレックス

タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

Vueカスタム命令の詳細な説明

目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...

アコーディオンセカンダリメニューを実装するためのjQueryプラグイン

この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...

MySQLバッチは特定のフィールドのスペースを削除します

Mysql で特定のフィールドからスペースを一括削除する方法はありますか?文字列の前後のスペースだけ...

ホバー画像のポップアウトポップアップ効果を実現するための純粋な CSS のサンプルコード

実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...

jsはテーブルドラッグオプションを実装します

この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...

td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...

JS でシンプルなデータ監視を実装する方法

目次概要最初のステップステップ2なぜ別の _data が必要なのでしょうか?データにもう少しデータを...

MySQL の制限使用法とページングクエリステートメントのパフォーマンス分析の詳細な説明

使用制限クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要が...

Tomcat および Web アプリケーションの Docker デプロイメントの実装

1.dockerをオンラインでダウンロードする yum インストール -y epel-release...