可以自动播放，但是一旦鼠标移入移出就乱了
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动</title>
<style type="text/css">
*{margin: 0;padding: 0;font-size: 18px;}
.body{width: 500px;margin: 0 auto;}
#myscroll{width: 200px;height: 200px;float: left;}
#scrollbox{width: 300px;height: 120px;overflow: hidden; float: left;}
#con1{/*overflow: hidden;*/width: 300px;}
ul{list-style: none;}
li{height: 24px;overflow: hidden;}
#scrollbox ul li a{text-decoration: none;color: #000;}
</style>
</head>
<body>
<div class="body">
<div id="myscroll">站内公告：</div>
<div id="scrollbox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a></li>
<li><a href="#">2.tab页面切换效果（案例）</a></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a></li>
<li><a href="#">5.分页页码制作（案例）</a></li>
<li><a href="#">6.导航条菜单的制作（案例）</a></li>
<li><a href="#">7.信息列表制作(案例)</a></li>
<li><a href="#">8.下拉菜单制作(案例)</a></li>
<li><a href="#">9.如何实现“新手引导”效果</a></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
<script type="text/javascript">
var scrollbox=document.getElementById('scrollbox');
var con1=document.getElementById("con1");
var con2=document.getElementById("con2");
var delay=2000;
var speed=50;
var liheight=24;
con2.innerHTML=con1.innerHTML;
var timer;
scrollbox.scrollTop=0;
scrollbox.onmouseover=function(){
clearInterval(timer);
}
scrollbox.onmouseout=function(){
star();
}
function star(){
scrollbox.scrollTop++;
timer=setInterval(scrollUp,speed);
}
function scrollUp(){
if (scrollbox.scrollTop % liheight==0) {
clearInterval(timer);
setTimeout(star,delay);
}else{
scrollbox.scrollTop++;
if (scrollbox.scrollTop>=con1.offsetHeight) {
scrollbox.scrollTop=0;
}
}
}
setTimeout(star,delay)
</script>
</body>
</html>
良辰瑾空人心1回答
-
慕粉3456840
scrollUp()中的timer=setTimeout(star,delay) ;
随时随地看视频慕课网APP
相关分类
JavaScript