ボタンをクリックして画像を切り替える 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);
            テキスト配置: 中央;
        }
    
        ボタン:ホバー{
            カーソル: ポインタ;
        }
</スタイル>

<スクリプト>
        //プリロード、ページが読み込まれた後にスクリプトを実行します 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) + ""です。 //先頭の文字列は連結されており、加算を実装するには括弧が必要であることに注意してください}
}