无缝循环滚动
Posted zyip
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无缝循环滚动相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <wraper> <ul id="ul"> <li>AA</li> <li>BB</li> <li>CC</li> <li>DD</li> <li>EE</li> <li>FF</li> <li>AA</li> <li>BB</li> <li>CC</li <li>DD</li> <li>EE</li> </ul> </wraper> </body> </html>
wraper{ display:block; background-color:red; width:200px; overflow:hidden; position:relative; height:100px; } ul{ width:490px; position:absolute; left:0px; right:0px; top:0px; height:20px; bottom:20px; display:block; } li{ float:left; width:45px; }
var x=document.getElementById(‘ul‘); setInterval(function(){ var left=x.style.left.replace(‘px‘,‘‘); if(left<-290) { left=-30; } x.style.left=left-10+‘px‘; },100);
以上是关于无缝循环滚动的主要内容,如果未能解决你的问题,请参考以下文章
让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码