js无缝滚动:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding:0;} ul,li{list-style: none;} #main{ width:400px; height: 100px; border: 4px solid #ddd; background: #fff; margin: 0 auto; overflow: hidden; } #main h1{border-bottom: 4px solid #000;background: pink} #area{ overflow: hidden;height:100% } </style></head><body> <div id="main"> <h1>无缝滚动</h1> <div id="area"> <ul id="ul1"> <li>1.西游记</li> <li>2.红楼梦</li> <li>3.西厢记</li> <li>4.鹿鼎记</li> <li>5.石头记</li> <li>6.水浒传</li> </ul> <ul id="ul2"></ul> </div> </div> <script type="text/javascript"> var area=document.getElementById("area"); var ul1=document.getElementById("ul1"); var ul2=document.getElementById("ul2"); ul2.innerHTML=ul1.innerHTML;//克隆一个ul function scrollUp(){ if(area.scrollTop>=ul1.offsetHeight){ area.scrollTop=0; }else{ area.scrollTop++; } } var myScroll=setInterval("scrollUp()",50); area.onmouseover=function(){ clearInterval(myScroll); } area.onmouseout=function(){ myScroll=setInterval("scrollUp()",50); } </script></body></html>
随时随地看视频
