<script language =javascript >
var curIndex=0
//时间间隔 单位毫秒
var timeInterval=5000
var arr=new Array()
arr[0]="1.jpg"
arr[1]="2.jpg"
arr[2]="3.jpg"
arr[3]="4.jpg"
arr[4]="5.jpg"
arr[5]="6.jpg"
arr[6]="7.jpg"
setInterval(changeImg,timeInterval)
function changeImg()
{
var obj=document.getElementById("showpic")
if (curIndex==arr.length-1)
{
curIndex=0
}
else
{
curIndex+=1
}
obj.src="image/"+arr[curIndex]
}
</script>
<img src="image/1.jpg" width="427" height="219" id="showpic" />
不应该用SetTimeOut 方法 这个方法只会加载完成1秒之后 执行第一次(且只执行第一次) 并不是每隔一秒就会执行如果想要实现图片自动切换 你把SetTimeOut这个方法 换成setInterval这个方法 就可以实现了
<!DOCTYPE html><html>
<head>
<style type="text/css">
.box {
width: 200px
height: 200px
margin: 100px auto
border: 1px solid pink
}
.box img {
display: inline-block
width: 100%
height: 100%
}
</style>
</head>
<body>
<div class="box">
<img src="">
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var imgArr = [
"./img/0.png",
"./img/1.png",
"./img/2.png",
"./img/3.png",
"./img/4.png",
]
$(".box img").attr("src", imgArr[0])
var i = 0
setInterval(function () {
i++
if (i > imgArr.length - 1) {
i = 0
}
$(".box img").attr("src", imgArr[i])
}, 2000)
})
</script>
</body>
</html>
上面是代码：
实现原理是通过间隔定时器，每过2秒去设置img的src属性。
imgArr是保存图片的数组，当每一张图片都展示后重头再开始
imgArr的值是一张张图片我这里是在img文件夹下放了5张图片，题主可以根据自己的需求选择网上或者本地图片。
代码效果：
