複数の画像を切り替えるJavaScript

<本文>
 <div class="outer">
  <p id="情報"></p>
  <img src="./images/banner1.png" alt="画像" title="画像">

  <button id='prev'>前へ</button>
  <button id='next'>次へ</button>
 </div>

</本文>

<スタイル>
  * {
   パディング: 0;
   マージン: 0;
  }

  .外側{
   幅: 1000ピクセル;
   背景色: #bfa;
   マージン: 50px 自動;
   テキスト配置: 中央;
   パディング: 10px;
  }

  画像 {
   幅: 900ピクセル;
   表示: ブロック;
   マージン: 0 自動;
  }

  ボタン {
   マージン: 5px;
  }
</スタイル>

<スクリプト>
  // ドキュメントをロードします。window.onload = function () {
   //imgタグを取得します。var img = document.getElementsByTagName("img")[0];
   
   //すべての画像のパスを保存する配列を作成します //ここで画像ファイルのパスを設定します var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
   //画像の初期値を設定します。var index = 0;
   // ID が info の p タグを取得します。var info = document.getElementById("info");
   info.innerHTML = "合計" + imgArr.length + "個数," + "現在は" + (index + 1) + "個数";

   // 2つのボタンをバインド // 前 document.getElementById("prev").onclick = function () {
    索引 - ;
    // インデックスが0未満かどうかをチェックする
    （インデックス<0）の場合{
     index = imgArr.length - 1; //ループ（最初の画像 -> 最後の画像）
    }
    img.src = imgArr[インデックス];
    info.innerHTML = "合計" + imgArr.length + "個数," + "現在は" + (index + 1) + "個数";
   };
   //次へ document.getElementById("next").onclick = function () {
    インデックス++;
    //インデックスが配列の長さ - 1（配列の最大添え字）より大きいかどうかを判断します
    if (インデックス > imgArr.length - 1) {
     index = 0; //ループ（最後の画像 -> 最初の画像）
    }
    img.src = imgArr[インデックス];
    info.innerHTML = "合計" + imgArr.length + "個数," + "現在は" + (index + 1) + "個数";
   }
  };

</スクリプト>