ボタンをクリックして画像を切り替える JavaScript

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript でのカスタム スワイパー コンポーネントの詳細な説明
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JavaScript でカルーセル効果を実装する
  • JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ
  • 花火効果を実現するJavaScript(オブジェクト指向)
  • JavaScript Canvas で三目並べゲームを実装
  • JavaScriptのループの違いについての詳細な説明
  • JavaScript コードを省略する一般的な方法の概要
  • あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

<<:  MySQL ログトリガー実装コード

>>:  ローカルでビルドした Docker イメージを Dockerhub に公開する方法

推薦する

Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピーコードは次のとおりです。 <html xmlns="http://ww...

CentOS 7 で NFS ファイル共有ストレージ サービスを構築するための完全な手順

序文NFS (Network File System) は、ネットワーク ファイル システムを意味し...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...

HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法

1. HTMLフォントカラー設定HTML では、フォント タグを使用してフォント コンテンツの色を設...

MySQL における INSERT INTO SET の利点

MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...

vue+iviewのメニューとタブの連携方法

Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

MySQLデータ移行の概要

目次序文: 1. データ移行について2. 移行計画と留意点要約:序文:日常業務では、テーブル、データ...

Vue サーバーに js 構成ファイルをインポートする方法

目次背景成し遂げるvue-cli2.0での設定方法の補足要約する背景プロジェクトにはローカル構成ファ...