标签：over sha list 数字 图片 amp size timer relative
轮播图的制作方法有许多种
我觉得最常用的是把所有图都放进一个div里，然后只显示第一张，其余的都隐藏，然后再一张张显示出来：
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="1" />
<img src="img/1.jpg" alt="1" />
<img src="img/2.jpg" alt="2" />
<img src="img/3.jpg" alt="3" />
<img src="img/4.jpg" alt="4" />
<img src="img/5.jpg" alt="5" />
<img src="img/1.jpg" alt="5" />
</div>
</div>
#container {
position: relative;
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}
#list img {
float: left;
width: 600px;
height: 400px;
}
我用的是老师之前的方法，就是图个简便，把图片前缀名改成1234，然后利用for循环，把数字改变，显示出不同的图片：
<div id="tp">
<img src="img/1.png">
</div>
<button id="syz" onClick="one(‘shang‘)"><</button>
<button id="xyz" onClick="one(‘xia‘)">></button>
var d =3;
function one(type){
var hh = document.getElementById("tp").innerHTML=‘<img src="img/‘+d+‘.png">‘
if(type=‘shang‘){
d--;
if(d==0){
d=3;
}
}else if(type=‘xia‘){
d++;
if(d==3){
d=1;
}
}
}
定时函数
settimout() 是执行一次命令
setInterval() 是重复执行命令
这样的话就可以设置自动轮播：
var timer;
function play() {
timer = setInterval(function(){
syz.onclick()
}, 3500)
}
play();
让它停下来的方法就是
window.clearInterval(intervalID)
intervalID是你想要取消的定时器的ID,这个ID是个整数,是由setInterval()返回的。
ps：鼠标放上去停止还没做好…………
标签：over sha list 数字 图片 amp size timer relative
原文地址：http://www.cnblogs.com/wang95529/p/7705378.html
