この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 効果画像: まず基本構造を構築する <div id="div"> <p id="desc"></p> <!-- デフォルトで最初の画像を表示します --> <img src="img/1.jpg" alt="読み込みに失敗しました" style="width: 800px;height: 400px;"> <button id="pre">前へ</button> <button id="next">次へ</button> </div> 次に、表示スタイルを設定します <スタイル> * { マージン: 0; パディング: 0; } #div { 幅: 800ピクセル; 高さ: 420px; マージン: 20px 自動; 背景色: rgb(243, 119, 36); テキスト配置: 中央; } ボタン:ホバー{ カーソル: ポインタ; } </スタイル> JavaScriptの最も重要な部分 <スクリプト> //プリロード、ページが読み込まれた後にスクリプトを実行します window.onload = function () { var num = document.getElementsByTagName("img")[0]; // ここでは img タグが 1 つしかありませんが、num 変数の結果は配列です // 画像のアドレスを定義します var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"]; //ボタンを取得します var prev = document.getElementById("pre"); var next = document.getElementById("next"); var インデックス = 0; //画像の説明 var p_desc = document.getElementById("desc"); p_desc.innerHTML = "合計" + shuzu.length + "画像" + "、現在は " + (index + 1) + "画像"です。 // 先頭の文字列は連結されており、加算を実装するには括弧が必要であることに注意してください // クリックして画像を切り替える prev.onclick = function () { 索引 - ; //ここでループします (index < 0) インデックス = shuzu.length - 1; num.src = shuzu[インデックス]; p_desc.innerHTML = "合計" + shuzu.length + "画像" + "、現在のものは " + (index + 1) + ""です。 //先頭の文字列は連結されており、加算を実装するには括弧が必要であることに注意してください} next.onclick = 関数(){ インデックス++; if (インデックス > shuzu.length - 1) インデックス = 0; num.src = shuzu[インデックス]; p_desc.innerHTML = "合計" + shuzu.length + "画像" + "、現在のものは " + (index + 1) + ""です。 //先頭の文字列は連結されており、加算を実装するには括弧が必要であることに注意してください} } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: ローカルでビルドした Docker イメージを Dockerhub に公開する方法
目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...
1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...
1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...
目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...
1 インストールリソースパッケージmysql-8.0.18-1.el7.x86_64.rpm-bun...
Like は中国語で「好き」を意味しますが、MySQL データベースに適用される場合、Like は、...
使用環境cmd モードで、mysql --version と入力します (インストールされている M...
目次jQuery の $.ajax Webpack時代の始まり約束について深く考えるネストをなくすj...
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...
手順は以下のとおりです1. dockerグループを作成する: sudo groupadd docke...
目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...
序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...
目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...
最近、社内の重要なサーバデータを定期的にストレージにバックアップし、ついでにメモしておきたい以前、W...