クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替えることです。ご参考までに: 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法
>>: MySql エラー 1698 (28000) の解決策
達成される効果:マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...
1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...
Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...
序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...
目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...
Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...
データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...
デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...
目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...
この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...
1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...
この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...
超初心者の私は、MySQL を学び始めたばかりで、インストール プロセス中に多くの問題に遭遇しました...
目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...
Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...