网页图片轮播代码

网页图片轮播代码

先上DIV

<div class="imgBox">
<img class="img-slide img1" src="图片地址1" alt="图片轮播1">
<img class="img-slide img2" src="图片地址2" alt="图片轮播2">
</div>

CSS 样式 （宽高均可更改）

.imgBox{
width: 900px;
height: 150px;
margin: 0 auto;

}
.imgBox img{
width: 900px;
height: 150px;
margin: 0 auto;
}
.img1{
display: block;
}
.img2{
display: none;
}

JS

//banner
    var index=0;
    //改变图片
    function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    //设置定时器，每隔5秒切换一张图片
    setInterval(ChangeImg,5000);