javascript - 图像每 30 秒更改一次 - 循环

Question

我想在 30 秒后更改图像。我使用的 javascript 如下所示:

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x = 0;

function changeImage() {
    document.getElementById("img").src=images[x];
    x++;
}

HTML:

<img id="img" src="startpicture.jpg">

现在我还没有测试过这个，但如果我的计算是正确的，它会起作用:)

现在我还想要做一个“淡入淡出的过渡”，我希望图像的变化可以循环播放(它会在所有图像显示后重新启动)。

你们知道怎么做吗？

Answer 1

我同意为这样的事情使用框架，只是因为它更容易。我很快就破解了这个，只是淡出一个图像然后切换，也不会在旧版本的 IE 中工作。但是正如您所见，实际淡入淡出的代码比 KARASZI István 发布的 JQuery 实现要长得多。

function changeImage() {
    var img = document.getElementById("img");
    img.src = images[x];
    x++;        
    if(x >= images.length) {
        x = 0;
    } 
    fadeImg(img, 100, true);
    setTimeout("changeImage()", 30000);
}

function fadeImg(el, val, fade) {
    if(fade === true) {
        val--;
    } else {
        val ++;
    }       
    if(val > 0 && val < 100) {
        el.style.opacity = val / 100;
        setTimeout(function(){ fadeImg(el, val, fade); }, 10);
    }
}

var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);