html中图片间隔几秒自动播放,案例15-自动播放轮播图-用延迟器setInterval

html>

Document

*{

margin: 0;

padding: 0;

}

a{

text-decoration: none;

}

.wrap{

width: 1000px;

height: 800px;

background: url(img/bg.jpg) no-repeat;

position: absolute;

left: 50%;

top: 50%;

margin-left: -500px;

margin-top: -400px;

}

#prev,#next{

position: absolute;

width: 25px;

height: 45px;

background: url(img/ar.png) no-repeat;

top: 155px;

}

#prev{

left: 13px;

}

#next{

transform: rotate(180deg);

right: 13px;

}

.pic{

width: 536px;

height: 356px;

position: absolute;

top: 170px;

left: 297px;

}

img{

vertical-align: top;

width: 536px;

height: 356px;

}

#txt{

width: 536px;

height: 71px;

position: absolute;

left: 297px;

bottom: 185px;

text-align: center;

font: 20px/71px "微软雅黑";

color: #666;

}

这是第 1 张图片

var pic = document.querySelector('img');

var imgs = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];

var num = 0;

setInterval(function(){

num++;

if(num >= imgs.length){

num = 0;

}

pic.src = imgs[num];

},1000)