クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替えることです。ご参考までに: 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. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...
序文:一部のアプリケーション シナリオでは、成績や年齢によるランキングなど、ランキングの問題が発生す...
1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...
タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...
【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...
目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...
この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...
Mysql で特定のフィールドからスペースを一括削除する方法はありますか?文字列の前後のスペースだけ...
実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...
この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...
以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...
目次概要最初のステップステップ2なぜ別の _data が必要なのでしょうか?データにもう少しデータを...
使用制限クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要が...
1.dockerをオンラインでダウンロードする yum インストール -y epel-release...