轮播图
讲解见代码：
方法一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>沙县小吃</title>
</head>
<body>
沙县小吃
<img src="../img/01.jpg" id="pic">
<script>
var pics=["../img/01.jpg","../img/02.jpg","../img/03.jpg"];
//每三秒钟切换一次
var index=0;//当前显示的图片编号
var loop=true;
function change(){
index=(index+1)%3;
//获取图片对象
var obj=document.getElementById("pic");
obj.src=pics[index];
if(loop){
setTimeout(change,3000);
}
}
//添加事件处理
var pic=document.getElementById("pic");
pic.οnmοuseοver=function(){
//停止轮播
//alert("onmouseover");
loop=true;
}
pic.οnmοuseοut=function(){
//继续轮播
//alert("mouseout");
loop=true;
setTimeout(change,3000);
}
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#title{
background-color: #AFEEEE;
text-align: center;
}
#pic{
width: 100%;
}
</style>
</head>
<body>
<div id="title">
全聚德
</div>
<div>
<img src="../img/01.jpg" id="pic"></ing>
</div>
<script>
var pics =["../img/01.jpg","../img/02.jpg","../img/03.jpg"];
var index=0;
var img=document.getElementById("pic");
function change(){
index=(index+1)%3;
img.src=pics[index];//图片切换
}
//设定定时器 每隔3秒钟切换一张图片
var tt=setInterval(change,3000);
img.οnmοuseοver=function(){
clearInterval(tt);//停止轮播
}
img.οnmοuseοut=function(){
tt=setInterval(change,3000);
}
</script>
</body>
</html>
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30545764/viewspace-2120997/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/30545764/viewspace-2120997/
扫一扫
2927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
