代碼如下<!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">站內(nèi)公告：</div> <div id="scrollbox"> ? ?<ul id="con1"> ? ? ? ?<li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a></li> ? ? ? ?<li><a href="#">2.tab頁面切換效果（案例）</a></li> ? ? ? ?<li><a href="#">3.圓角水晶按鈕制作（案例）</a></li> ? ? ? ?<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a></li> ? ? ? ?<li><a href="#">5.分頁頁碼制作（案例）</a></li> ? ? ? ?<li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a></li> ? ? ? ?<li><a href="#">7.信息列表制作(案例)</a></li> ? ? ? ?<li><a href="#">8.下拉菜單制作(案例)</a></li> ? ? ? ?<li><a href="#">9.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</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>
可以自動播放，但是一旦鼠標(biāo)移入移出就亂了
良辰瑾空人心
2016-07-27 15:15:04
