画像をクリックして切り替える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) の解決策

推薦する

JavaScript で虫眼鏡の特殊効果を実現

達成される効果:マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...

KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...

Vueのv-onパラメータの問題についてお話しましょう

Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...

MySQLのスリープ関数の特殊現象例の詳しい説明

序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...

Docker+K8S+GitLab/SVN+Jenkins+Harbor をベースにした継続的インテグレーション配信環境の構築に関する詳細なチュートリアル

目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

MySQL のデータベース パフォーマンスに影響を与える要因の説明

データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...

Vue.js ディレクティブのカスタム命令の詳細な説明

デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

WeChatミニプログラムが星評価を実装

この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...

MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明

1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル (Win10 Home バージョン 64)

超初心者の私は、MySQL を学び始めたばかりで、インストール プロセス中に多くの問題に遭遇しました...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...