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

我想在 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">

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

现在我还想要的是进行“淡入淡出过渡”，并且我希望图像的更改能够循环（在显示所有图像后重新启动）。

你们有人知道该怎么做吗？

我同意使用框架来做这样的事情，只是因为它更容易。我很快就破解了这个，只是淡出图像然后切换，在旧版本的 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);