廊自转

Question

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();

oli/ytc4LeLc/3/

以上是小提琴链接，图片库应该切换幻灯片在自动旋转，或视觉间隔的自动恢复0.5秒，但目前有更多的时间间隔时，画廊重新启动幻灯片。

Answer 1

这是因为在幻灯片函数中，当位置等于大小时，重置列表，仅此而已。把它放下去就行了。

1. 显示图像(列表中的最后一幅图像)
2. 等待0.5秒
3. 重置列表(显示第一个图像)
4. 等待0.5秒
5. 再次显示第一个图像

所以在看第二张图片之前，你等待了1秒。只需使其在滑块重置时显示第一个图像，并将位置设置为第二个图像，以便在下一个时间间隔中显示第二个图像。

我会像这样改造你的功能

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

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

这样，您就不能同时显示所有图像，而位置变量始终是当前正在显示的图像的数量，这对于进一步的功能是有帮助的。