自动更换图片,这个是用定时器做的。下面是简单的代码,仅供参考:
<style>*{ margin:0 padding:0 list-style:none}
#box{ width:840px border:1px solid #000 height:210px margin:30px auto position:relative overflow:hidden}
#box ul{ position:absolute left:0 top:0}
#box ul li{ width:200px height:200px float:left padding:5px}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box')
var oUl=oBox.children[0]
var aLi=oUl.children
//复制一份内容
oUl.innerHTML+=oUl.innerHTML
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'
setInterval(function(){
var l=oUl.offsetLeft+10
if(l>=0){
l=-oUl.offsetWidth/2
}
oUl.style.left=l+'px'
},30)
}
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg" width="200"></li>
<li><img src="img/2.jpg" width="200"></li>
<li><img src="img/3.jpg" width="200"></li>
<li><img src="img/4.jpg" width="200"></li>
</ul>
</div>
简单的说一下定时器:
setInterval定义和用法
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
js实现更换图片:<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这个方法 就可以实现了