Question

我一直在尝试通过更改图像元素的值来创建html的图像滑块，使用循环遍历每个图像，然后返回到原始图像。

然而，一旦它到达循环结束，它就不会继续。

这是我的Js代码：

＆＃13;

window.onload = function() {
  var x = 0
  while(x<1000){
    setTimeout(function() {
      document.getElementById('carousel').src='img/header2.jpg';
      setTimeout(function() {
        document.getElementById('carousel').src='img/header3.jpg';
        setTimeout(function() {
          document.getElementById('carousel').src='img/header.jpg';
          }, 5000);
        }, 5000);
      }, 5000);
    x = x+1
  }
}

＆＃13;

Answer 1

我建议你不要在这种情况下进行while循环。只需在执行时回忆setTimeout。

window.onload = function() {
     /* Element */
    var carousel = document.getElementById('carousel'),
     /* Carousel current image */
    cimage = 2,
     /* Carousel source images */
    csources = [
        'img/header2.jpg',
        'img/header3.jpg',
        'img/header.jpg'
    ];

    function changeCarouselImage() {
        // Reset the current image if it's ultrapassing the length - 1
        if(cimage >= 3) cimage = 0;
        // Change the source image
        carousel.src = csources[cimage ++];
        // Re-call the function after 5s
        setTimeout(changeCarouselImage, 5000);
    }

    setTimeout(changeCarouselImage, 5000);
};

Answer 2

最终功能不会设置另一个超时，因此动画不会继续。分离各个功能应该有所帮助：

var carousel = document.getElementById('carousel');

function ani1() {
    carousel.src = 'img/header.jpg';
    window.setTimeout(ani2, 500);
}

function ani2() {
    carousel.src = 'img/header2.jpg';
    window.setTimeout(ani3, 500);
}

function ani3() {
    carousel.src = 'img/header3.jpg';
    window.setTimeout(ani1, 500);
}

window.onload = ani1;

Javascript滑块循环

2 个答案: