在网站中我们经常可以看到图片轮播的效果,下面的示例展示了这种效果。
<!DOCTYPE html>
<html>
<head>
<title>轮播</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
</head>
<style>
.ad{
border: 1px solid #ddd;
/* 与图片大小一致 */
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
.ad li{
list-style-type: none;
width: 480px;
height: 360px;
padding: 0;
margin: 0;
}
.show{/* 显示 */
display: block;
}
.hide{/* 隐藏 */
display: none;
}
</style>
<script>
/* 利用定时器,定时关闭显示图片 */
var timer;
var index = 0;//下一个图片的序号
function start(){
if(!timer){
timer = setInterval(function(){
//找到全部的 li 全部设置为hide
//找到下一个?设置 show
var ul = document
.getElementById("ad");
//找到ul中的全部li子元素
var li =
ul.getElementsByTagName("li");
for(var i=0; i<li.length; i++){
li[i].className="hide";
}
index++;
li[index%li.length]
.className="show";
}, 1000);
}
}
function stop(){
if(timer){
clearInterval(timer);
timer = null;
}
}
</script>
<!-- onload 在页面加载完毕以后执行 -->
<body οnlοad="start();">
<h1>轮播</h1>
<!-- onmouseover 事件在鼠标出现元素上的时候执行,onmouseout鼠标离开时候执行 -->
<ul id="ad" class="ad"
οnmοuseοver="stop();" οnmοuseοut="start();">
<li class="show"><a src="#"><img src="images/apple.jpg"></a></li>
<li class="hide"><a src="#"><img src="images/daffodil.jpg"></a></li>
<li class="hide"><a src="#"><img src="images/daisy.jpg"></a></li>
<li class="hide"><a src="#"><img src="images/rose.jpg"></a></li>
</ul>
</body>
</html>
这样我们就可以看出图片轮播的效果。