如何在x个图片上放一个计时器（JavaScript）

Question

我有一个代码可以更改每次单击按钮时显示的图片。但是，我需要代码将图片放在计时器上，这样只需要点击一次按钮，图片就会以相等的时间间隔显示。

我一直在尝试对JavaScript上的计时器进行一些研究，但似乎无法找到答案。

提前致谢。

Answer 1

评论的例子（你会看到它闪烁，因为没有实际的图片网址），如果你想要很好的淡入淡出图像，我建议你查看jQuery.fadeTo

＆＃13;

＆＃13;

function rotateImages() {
    var images = ['image1.jpg', 'image2.jpg'];
    var imageEle = document.getElementById('image_id');
    var imageInterval = setInterval(swapImage, 2000);
    var i = 0;
    function swapImage(){
     if(i === images.length - 1){
       clearInterval(imageInterval);
     }
     imageEle.src = images[i];
     i++; 
    }    
}

＆＃13;

<img id="image_id" src="image.jpg">
<button onclick='rotateImages();'>Rotate Images</button>

＆＃13;

＆＃13;

＆＃13;