首页 > 代码库 > 层的应用-由左向右的滚动广告
层的应用-由左向右的滚动广告
——————————————————————
<script type="text/javascript">
var timer = null; //定时器
//页面加载完成的事件回调
function init(){
var time = 30; //定义滚动的时间间隔，毫秒
//获取容器的DOM
var con_ul = document.getElementById(‘con_ul‘);
function MyMarquee(){
//滚动条的位置往左边移动一个像素
var left = con_ul.style.left;//得到当前的坐标坐标
left = parseInt(left); //得到数字的值
con_ul.style.left = (left-1)+‘px‘;//把左坐标向左移动
//如果移动到了头
if(left*-2 == parseInt(con_ul.style.width)){
con_ul.innerHTML += con_ul.innerHTML;//自我内容拷贝一份
}
}
timer = setInterval(MyMarquee,time);//开始一个定时执行
con_ul.onmouseover=function() { //定义鼠标放上事件
clearInterval(timer); //结束滚动
}
con_ul.onmouseout=function() { //定义鼠标移出事件
timer=setInterval(MyMarquee,time);//再次开始
}
}
</script>
——————————————————————————
<style>
#container li{
overflow: hidden;
float: left;
margin: 0 5px;
}
</style>
——————————————————————————
<body style="text-align:center" onl oad="init();">
<div id="container" style="width:800px;visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px;">
<ul id="con_ul" style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 3886px; left: 0px;">
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
<li><a target="_blank" href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg"><br>123123</a></li>
</ul>
</div>
</body>
——————————————————————————
层的应用-由左向右的滚动广告