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

https://fiddle.jshell.net/khimanand_oli/ytc4LeLc/3/

以上是小提琴链接， Gallery应该在自动旋转时切换幻灯片，或者每0.5秒自动显示一次，但是，当画廊重新开始滑行时，目前还有更多的时间差距。

Answer 1

这是因为在您的滑动功能中，当位置等于大小时，您重置列表，仅此而已。只是去吧。

显示图像（列表中的最后一张图像）
等待0.5秒
重置列表（显示第一张图片）
等待0.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";
}

有了这个，您不会同时显示所有图像，并且位置变量始终是此刻正在显示的图像的编号，这可能有助于进一步的功能

画廊自动旋转

1 个答案: