Javascript 轮播让我有时点击两次

Question

刚刚在这里学习Javascript。我用上一个按钮制作了一个小图像轮播。它大多数情况下都有效，但有时我必须单击它两次才能真正改变。关于为什么这样做以及如何解决它的任何见解？

https://jsfiddle.net/2t79qw4r/6/

var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg", "_images/winery_sign.jpg", "_images/lunch.jpg", "_images/bigSur.jpg", "_images/flag_photo.jpg", "_images/mission_look.jpg"];
var imageIndex = 0;
var prevImage = document.getElementById("prev");

function changeImage() {
  myImage.setAttribute("src", imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex >= imageArray.length) {
    imageIndex = 0;
  }
}

prevImage.onclick = function() {
  if (imageIndex === 0) {
    imageIndex = imageArray.length -1;
  } else {
    imageIndex = imageIndex - 1;
  }
  myImage.setAttribute("src", imageArray[imageIndex]);

};

setInterval(changeImage,3000);

谢谢

Answer 1

你的changeImage函数的顺序颠倒了；在设置之前更新值:

function changeImage() {
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
    myImage.setAttribute("src", imageArray[imageIndex]);
}

fiddle :https://jsfiddle.net/afptfbs8/