この記事の例では、ボタンをクリックすることで画像を切り替えることを実現する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 に公開する方法
コードをコピーコードは次のとおりです。 <html xmlns="http://ww...
序文NFS (Network File System) は、ネットワーク ファイル システムを意味し...
最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...
鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...
1. HTMLフォントカラー設定HTML では、フォント タグを使用してフォント コンテンツの色を設...
MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...
Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...
この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...
1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...
リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...
目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...
目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...
1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...
目次序文: 1. データ移行について2. 移行計画と留意点要約:序文:日常業務では、テーブル、データ...
目次背景成し遂げるvue-cli2.0での設定方法の補足要約する背景プロジェクトにはローカル構成ファ...