Javascript 幻灯片放映按钮在进入最后一张幻灯片时仅在第二次单击时起作用

我正在制作一个使用JSON数据填充内容的幻灯片。当我看到最后一张幻灯片时，我必须单击2-3次，然后才能在第一张幻灯片上再次开始播放幻灯片。我想确保不会发生这种情况，只需单击一下就可以再次开始第一张幻灯片。一个类似的错误是，当我第一次加载页面，第一次单击后退按钮时，我必须单击两次，之后它会正常工作。我确信我的一个if语句中存在问题，但我不知道出了什么问题

index.html

<div class="slideshow-container">
    <div class="mySlides fade">
        <img id="image" style="width:100%" >
        <div id="description"></div>
    </div>
    <a id="prev">&#10094;</a>
    <a id="next">&#10095;</a>
</div>

<script>
    window.onload = startup;
    var xmlhttp;
    function startup () {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = statechange;
        xmlhttp.open("GET", "slideshow.json", true);
        xmlhttp.send();
    }
    function statechange() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var printout = " ";
            var doc = JSON.parse(xmlhttp.responseText);
            var amountOfElements = doc.length;

            var current = 0;

            var imagePath = "assets/stop2/";
            document.getElementById("image").src = imagePath + doc[current].image;
            document.getElementById("description").innerHTML = doc[current].text;

            console.log(current);

            prev.onclick = function() {
                if(current !== 0){
                    current = current - 1;

                    document.getElementById("image").src = imagePath + doc[current].image;
                    document.getElementById("description").innerHTML = doc[current].text;

                    if(current === 0) {
                        current = amountOfElements;
                    }
                }
                else {
                    current = amountOfElements;
                }
                console.log(current);
            };

            next.onclick = function() {
                if(current < amountOfElements) {
                    current = current + 1;

                    document.getElementById("image").src = imagePath + doc[current].image;
                    document.getElementById("description").innerHTML = doc[current].text;
                }
                else {
                    current = -1;
                }
                console.log(current);
            };

        }
        else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
            alert("Something went wrong");
        }
    }
</script> 

---

如果想要无限循环行为，请尝试以下操作：

var updateUI = function() {
    document.getElementById("image").src = imagePath + doc[current].image;
    document.getElementById("description").innerHTML = doc[current].text;
}

prev.onclick = function() {

    if(current <= 0) {
        current = amountOfElements - 1; // index of last element
    }
    else {
        current--;  // just decrement
    }

    console.log(current);
    updateUI();
};

next.onclick = function() {

    if(current < amountOfElements - 1) {
        current++; // just increment
    }
    else {
        current = 0; // start at first element
    }

    console.log(current);
    updateUI();
};

var updateUI=function（）{
document.getElementById（“image”）.src=imagePath+doc[current].image；
document.getElementById（“description”）.innerHTML=doc[current].text；
}
prev.onclick=函数（）{
if（current您只在if块中进行更新，而不在else块中进行更新。我将更新代码放在if/else语句之后。此外，您使用了元素数，但从0开始迭代，这是错误的。这就是为什么我将其更改为元素数-1。在3->0的情况下，您将步骤更改为-1（不知道为什么？）而不是0

prev.onclick = function() {
      if (current !== 0) {
        current = current - 1;
      } else {
        current = amountOfElements - 1;
      }

      document.getElementById("image").src = imagePath + doc[current].image;
      document.getElementById("description").innerHTML = doc[current].text;
    };

    next.onclick = function() {
      if (current < amountOfElements - 1) {
        current = current + 1;
      } else {
        current = 0;
      }

      document.getElementById("image").src = imagePath + doc[current].image;
      document.getElementById("description").innerHTML = doc[current].text;
    };

prev.onclick=function（）{
如果（当前！==0）{
电流=电流-1；
}否则{
电流=AmountFelements-1；
}
document.getElementById（“image”）.src=imagePath+doc[current].image；
document.getElementById（“description”）.innerHTML=doc[current].text；
};
next.onclick=function（）{
if（电流

prev.onclick = function() {
      if (current !== 0) {
        current = current - 1;
      } else {
        current = amountOfElements - 1;
      }

      document.getElementById("image").src = imagePath + doc[current].image;
      document.getElementById("description").innerHTML = doc[current].text;
    };

    next.onclick = function() {
      if (current < amountOfElements - 1) {
        current = current + 1;
      } else {
        current = 0;
      }

      document.getElementById("image").src = imagePath + doc[current].image;
      document.getElementById("description").innerHTML = doc[current].text;
    };