ボタンをクリックして画像を切り替える 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 に公開する方法

推薦する

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

Docker-compose チュートリアルのインストールとクイックスタート

目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...

Linux (Centos7) に mysql8.0.18 をインストールするチュートリアル図

1 インストールリソースパッケージmysql-8.0.18-1.el7.x86_64.rpm-bun...

MySQL の Like の概念と使用法の説明

Like は中国語で「好き」を意味しますが、MySQL データベースに適用される場合、Like は、...

MySQL コマンドラインモードアクセス操作 MySQL データベース操作

使用環境cmd モードで、mysql --version と入力します (インストールされている M...

JS で async await をエレガントに使用する方法

目次jQuery の $.ajax Webpack時代の始まり約束について深く考えるネストをなくすj...

Html+CSS フローティング広告ストリップの実装

1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...

MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...

Dockerがsudo操作を使用する必要がある問題を解決する

手順は以下のとおりです1. dockerグループを作成する: sudo groupadd docke...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

Docker 基本チュートリアル: Dockerfile 構文の詳細な説明

序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

Centos7 での Rsync+crontab 定期同期バックアップ

最近、社内の重要なサーバデータを定期的にストレージにバックアップし、ついでにメモしておきたい以前、W...