图片不间断滚动的特效代码详细讲解(3)
介绍了大半天的setTimeout和clearTimeout，呵呵，现在可以看看怎么使用这个特效吧，页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动图片</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
text-align:center;
background-color:#FFF;
color:#000;
font:'宋体',sans-serif;
}
img{
border:0;
}
ul,li{
list-style-type:none;
}
a:link,
a:visited{
color:#000;
text-decoration:none;
}
a:hover{
color:#F00;
text-decoration:none;
}
#container{
margin:0 auto;
position:relative;
margin-top:10px;
width:720px;
height:100px;
overflow:hidden;
}
#message,
#message_copymsgid{
margin:0;
width:720px;
overflow:hidden;
}
#container ul{
float:left;
width:720px;
height:100px;
overflow:hidden;
clear:both;
}
#container li{
float:left;
text-align:center;
width:120px;
height:100px;
line-height:100px;
overflow:hidden;
padding:0;
}
#container li img{
width:96px;
height:96px;
margin-bottom:10px;
padding:1px;
border:1px solid #999;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="message">
<ul><li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="听海"><img src="img/img1.gif" alt="听海" /></a></li>
</ul>
<ul>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="宝贝"><img src="img/img2.gif" alt="宝贝" /></a></li>
</ul>
<ul>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因为你"><img src="img/img3.gif" alt="因为你" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript" language="javascript" src="js/event.js"></script>
<script type="text/javascript" language="javascript" src="js/scrollver.js"></script>
<script type="text/javascript" language="javascript">
<!--
function init_Scroll(){
// 创建一个垂直滚动对象的实例
// 显示容器为container，你也可以直接写document.getElement('container')
var scrollPics = new scrollVertical('container','message','ul');
scrollPics.speed = 4000; // 间隔时间，更准确的说，是滚动完一行，停留的时间
scrollPics.isPause = true; // 是否暂停为true，不能一开始就滚动，需要先停留下，然后再滚动
// 这个则是指定，第一次显示滚动内容第一行停留的时间为2秒
// 2秒后isPause为false,也就不暂停滚动，开始滚动了。
// 这个时间大家可以自己设定
var timer_start = setTimeout(function(){clearTimeout(timer_start);scrollPics.isPause = false;},2000);
Event.addEvent(scrollPics.scrollArea,"mouseover",function(){scrollPics.isPause = true;});
Event.addEvent(scrollPics.scrollArea,"mouseout",function(){scrollPics.isPause = false;});
}
/*
* 其实这里也可以直接写init_Scroll();
* 应为我已经把脚本放到文档的最后面，
* 在加载脚本之前，所有的DOM节点已经加载完毕
* 已经可以直接用脚本访问DOM节点了
*/
Event.addEvent(window,'load',init_Scroll);
//-->
</script>
</body>
</html>
刚才给大家介绍了JS的一些知识点，现在就讲下相关的CSS技巧。
#container{
margin:0 auto;
margin-top:10px;
width:720px;
height:100px;
overflow:hidden;
}
一定要“overflow:hidden;”，为什么？呵呵，看看我们把高度设置为了height:100px;，正好是只一行信息的高度，如果你不overflow:hidden，在firefox也许没有问题，它会严格按照你指定的高度显示相应高度的内容，而隐藏多余的部分（多余的5行），而在IE中，一直就自做聪明把容器挤高，让它把里面的全部内容都显示出来。而我们的效果也是只显示一行，而隐藏多余的5行。