我同意使用这样的框架，只是因为它更容易。我真的很快就破解了它，只是淡化了一张图片，然后切换，在旧版本的IE中也无法使用。但是你可以看到实际淡出的代码比KARASZIIstvá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）; 
} 

函数fadeImg（el，val，fade）{
 if（fade === true）{
 val--; 
} else {
 val ++; （val> 0&& val< 100）{
 el.style.opacity = val / 100; 
} 

 if 
 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）; 
 

I would like to make an image change after 30 seconds...

The code I'm using looks like this:

Script:

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++;
}

And the body:

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

Now I haven't tested this one yet, but if my calculations are correct it will work :)

Now what I also want is to make a "fading transition" and I would like the changing of images to loop (it restarts after all the images have been shown). Do any of you guys know how to do that? I don't :)

I agree with using frameworks for things like this, just because its easier. I hacked this up real quick, just fades an image out and then switches, also will not work in older versions of IE. But as you can see the code for the actual fade is much longer than the JQuery implementation posted by KARASZI István.

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