javascript - 画像回転子の JavaScript コード

Question

私はJavaScriptを介して8つの画像ボタン回転子を作成しようとしています.ボタン「<」">」「<<」">>」とチェックボックス画像回転子があります。これまでのコードとスクリーンショットを送信できます。誰か助けてもらえますか? これが私のコードです。

<div id="images">
  <img src="images/sample1.jpg" id="image"/>
</div>
<div id="buttonContainer">
  <button id="firstImageButton" title="Click to view the first image." onClick="previousImage("image")">&laquo;</button>
  <button id="previousImageButton" title="Click to view the previous image." >&lt;</button>
  <button id="nextImageButton" title="Click to view the next image." >&gt;</button>
  <button id="lastImageButton" title="Click to view the last image." onClick="images/sample8.jpg">&raquo;</button>
  <br/><input type="checkbox" id="autoRotate" /><label for="autoRotate">Click to auto-rotate</label>
</div>
</div>
</div>

脚本

<script>
  var images = [ "images/sample1.jpg", "images/sample2.jpg", "images/sample3.jpg", "images/sample4.jpg", "images/sample5.jpg", "images/sample6.jpg", "images/sample7.jpg", "images/sample8.jpg" ]
  var currentImageIndex = 0;
  var currentImage = 0;

  function nextImageButton() {
    currentImage += 1;
    displayImage(currentImage);
  }

  function previousImageButton() {
    currentImage -= 1;
    displayPage(currentImage);
  }

  function displayImage (imageIndex) {
    document.getElementById("images").innerHTML = images[imageIndex];   
    document.getElementById("nextImageButton").style.visibility = "visible";
    document.getElementById("previousImageButton").style.visibility = "visible";

    if(imageIndex == images.length - 1) {
      document.getElementById("nextImageButton").style.visibility = "hidden";
    }
    if(imageIndex == 0) {
      document.getElementById("previousImageButton").style.visibility = "hidden";
    }
  }
</script>