シンプルな画像切り替えを実現するJavaScript

この記事では、JavaScriptで簡単な画像切り替えを実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

写真を切り替えるには、いくつかの方法があります。

方法1 （初心者向け！わかりやすい）コードは下記に添付されています：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>画像スイッチ 2</title>
    <スタイル タイプ="text/css">
        *{
            パディング: 0;
            マージン: 0;
        }
        ＃箱{
            境界線: 1px 実線 #ccc;
            幅: 450ピクセル;
            高さ: 70px;
            パディング上部: 450px;
            背景: url("img/big_pic01.jpg") 繰り返しなし;
        }
        #ボックス ul li{
            フロート: 左;
            左パディング: 10px;
        }
    </スタイル>
</head>
<本文>
    <div id="ボックス">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="item5">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        //初心者向けの書き方 // 1. イベントソースを取得する var item1 = document.getElementById("item1");
        var item2 = document.getElementById("item2");
        var item3 = document.getElementById("item3");
        var item4 = document.getElementById("item4");
        var item5 = document.getElementById("item5");
        var oBos = document.getElementById("ボックス");

        // 2. イベントを追加する item1.onmouseover = function (){
         //マウスを関連 ID の上に置くと、画像を指すパスが変更されます oBos.style.background = "url('img/big_pic01.jpg') no-repeat";
        }
        item2.onmouseover = 関数 (){
            oBos.style.background = "url('img/big_pic02.jpg') 繰り返しなし";
        }
        item3.onmouseover = 関数 (){
            oBos.style.background = "url('img/big_pic03.jpg') 繰り返しなし";
        }
        item4.onmouseover = 関数 (){
            oBos.style.background = "url('img/big_pic04.jpg') 繰り返しなし";
        }
        item5.onmouseover = 関数 (){
            oBos.style.background = "url('img/big_pic05.jpg') 繰り返しなし";
        }

    </スクリプト>
</本文>
</html>

上記の JS コードは扱いにくく、コードの冗長性が生じやすい可能性があります。

次に、いくつか変更を加えて方法 2 を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>画像スイッチ 2</title>
    <スタイル タイプ="text/css">
        *{
            パディング: 0;
            マージン: 0;
        }
        ＃箱{
            境界線: 1px 実線 #ccc;
            幅: 450ピクセル;
            高さ: 70px;
            パディング上部: 450px;
            背景: url("img/big_pic01.jpg") 繰り返しなし;
        }
        #ボックス ul li{
            フロート: 左;
            左パディング: 10px;
        }
    </スタイル>
</head>
<本文>
    <div id="ボックス">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="item5">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">

        // 1. イベントソースを取得します。これにより、var 定義プロセスが大幅に削減されます。function $(id){
            戻り値の型は id === "string" ですか?document.getElementById(id):null;
        }
        // 背景画像を変更します。liId は指し示される ID であり、imgSrc は関数 changebgcImg(liId,imgSrc){ で背景画像を渡すためのパラメータです。
            // 2. イベントを追加 $(liId).onmouseover = function (){
                // 3. 背景画像を変更します $("box").style.background = imgSrc;
            }
        }
        changebgcImg("item1",'url("img/big_pic01.jpg") 繰り返しなし');
        changebgcImg("item2",'url("img/big_pic02.jpg") 繰り返しなし');
        changebgcImg("item3",'url("img/big_pic03.jpg") 繰り返しなし');
        changebgcImg("item4",'url("img/big_pic04.jpg") 繰り返しなし');
        changebgcImg("item5",'url("img/big_pic05.jpg") 繰り返しなし');

    </スクリプト>
</本文>
</html>

ご覧のとおり、方法 2 では方法 1 よりも JS コードが少なくなります。

上記の変更に続いて、方法 3 を検討します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>画像切り替えフルバージョン</title>
    <スタイル タイプ="text/css">
        *{
            パディング: 0;
            マージン: 0;
        }
        ＃箱{
            境界線: 1px 実線 #ccc;
            幅: 450ピクセル;
            高さ: 70px;
            パディング上部: 450px;
            背景: url("img/big_pic01.jpg") 繰り返しなし;
        }
        #ボックス ul li{
            フロート: 左;
            左パディング: 10px;
        }
    </スタイル>
</head>
<本文>
    <div id="ボックス">
        <ul>
            <li class="item">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 1. イベントソース関数 $(id){ を取得する
            戻り値の型は id === 'string' ですか? document.getElementById(id):null;
        }
        // 以下の item という名前の li タグをすべて取得します。var items = document.getElementsByClassName("item");
        // コンソールログ(アイテム);
        (var i=0;i<items.length;i++){
            var アイテム = items[i];
            アイテムのインデックス = i+1;
            items[i].onmouseover = 関数 (){
                $("box").style.background = `url("img/big_pic0${this.index}.jpg") 繰り返しなし`
                // ${i} を直接設定することはできませんが、関数内で呼び出される i はグローバル変数であり、for ループの後は常に i が 5 を指すため、変数 item を再定義する必要があります。
                // $("box").style.background = `url("img/big_pic0${i}.jpg") 繰り返しなし`
            }
        }
    </スクリプト>
</本文>
</html>

3 つの方法すべてで画像切り替え効果を実現できます (画像が多く、表示する画像の数が同じでない場合は、最初の方法は推奨されません)。画像切り替え効果は次のとおりです。