js/html/css做一个简单的图片自动（auto）轮播效果//带注释

FF（firefox）/chrom/ie稳定暂无bug...
注意：请自己建立一个images文件，放入几张900*238的图片（注意图片格式和名字与程序中一致）。

1. [图片] 1.JPG    

2. [图片] 2.JPG    

3. [文件] style.css ~ 443B    

    
#contain{
    float:left;
    width: 900px;
    height: 240px;
    border: 1px dotted red;
}
.imageShow{
    width: 900px;
    height: 238px;
    border: 1px dashed Olive;
    background: url(images/0.png);
}
#posi{
    margin: -30px 0 0 700px;
    width: 100px;
    height: 25px;
}
.radio{
    width: 15px;
    height: 15px;
    margin-left: -8px;
    cursor: pointer;
    background: red;
}
4. [文件] autoChangeImages.js ~
    
var i = 1;
function autoChangeImage(i){                //自动改变图片
        setTimeout("changeImage(i++); ", 1500);
        setTimeout("back(i); ", 1000);
        setTimeout("autoChangeImage(i = (i%5)); ", 1500);
}
function changeImage(idNum){
        document.getElementById("radio" + idNum).checked = "checked";
        switch(idNum){
            case 0:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/0.png)";//改变首页图片
                break;
            case 1:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/1.png)";
                break;
            case 2:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/2.png)";
                break;
            case 3:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/3.png)";
                break;
            case 4:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/4.png)";
                break;
        }
}
5. [文件] autoChangeImages.html