Javascript 画廊自动旋转 var位置=0； 变量大小=0； var-id=0； 函数init（）{ var slides=document.getElementById（“gallery”）.children； var button=document.getElementById（'btn'）； 变量大小=幻灯片长度； 对于（var i=1；i

这是因为在滑动函数中，当位置等于大小时，您重置列表，仅此而已

显示图像（列表中的最后一个图像）

等待0.5秒

重置列表（是否显示第一个图像）

等待0.5秒

再次显示第一个图像

因此，在进入第二个图像之前，您需要等待1秒。只需使其在滑块重置时显示第一个图像，并将位置设置为第二个图像，以便在下一个间隔中显示第二个图像

我会像这样重做你的函数

var position = 0;
var size = 0;
var id = 0;

function init(){
  var slides = document.getElementById("gallery").children;
  var button = document.getElementById('btn');
  var size = slides.length;

for(var i = 1; i<size; i++){
    slides[i].style.display = 'none';

}
   function slide(){
     if (position < size){
     slides[position].style.display = "block";      
     position++;
 }
 else{
    position = 0;
    for(var i=1; i<size; ++i){
        slides[i].style.display = "none";

    }
  }

} 

button.onclick =function(){
    if (button.innerHTML == "PLAY") {
        id = setInterval(slide, 500);
        button.innerHTML = "STOP";
    }
    else {
        button.innerHTML = "PLAY";
        clearTimeout(id);
    }
  };

 }

init();

//滑块的功能
函数幻灯片（）{
幻灯片[位置].style.display=“无”；
如果（位置<尺寸-1）{
位置++；
}
否则{
位置=0；
}
幻灯片[位置].style.display=“块”；
}

---

这样，您就不会同时显示所有图像，位置变量始终是当前显示的图像的编号，这对进一步的功能很有帮助

请给出答案，以便每个图像都应以0.5秒的间隔旋转，我正在学习JS。我该如何做。我添加了一个充足的

//function of slider
function slide(){
    slides[position].style.display = "none";

    if(position < size - 1){
        position++;
    }
    else{
        position = 0;
    }
    slides[position].style.display = "block";
}