简单轮播图实现

页面布局

<div id="divAll">
    <img id="img" src="img/1.png" name="photo1" />
    <div id="ddd">
        <input id="radio1" type="radio" name="small" checked="checked"/>
        <input id="radio2" type="radio" name="small"/>
        <input id="radio3" type="radio" name="small"/>
        <input id="radio4" type="radio" name="small"/>
    </div>
</div>

CSS样式设计

body{
    text-align: center;
    width: auto;
    height: auto;
}
img{
    text-align: center;
    width: 600px;
    height: 400px;
    border: 4px solid black;
    border-radius: 16px;
}
#ddd{
    width: 10%;
    position: absolute;
    left: 45%;
    margin-top: -32px;
    
}
input{
    background-color: wheat;
    color: gold;
}

js功能实现

window.onload = function(){
    var x = 1;
    var idimg = document.getElementById("img");
    var ids = document.getElementsByName("small");
    //alert(ids.length)//4
    
    //自动轮播实现
    var changeImg = function(){
        x++;
        if(x > 4){
            x = 1;
        }
        idimg.src = "img/" + x + ".png";
        ids[x - 1].checked="checked" ;
        
    }
    v = window.setInterval(changeImg, 1000);
    
    //刷新后显示图片一
    window.onunload = function(){
        x = 1;
        ids[0].checked="checked" ;
    }

}