jquery无限无缝文字轮播滚动
实现原理
1 复制一份要滚动内容追加到原内容后面
2 js动态修改滚动区块的top或left的绝对位置
3 当滚动top或left位置等于区块高度或宽度时,让其归0,这就实现的无缝轮播
html代码
<div class="box"> <div class="box"> <ul class="scroll"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</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> </div>
css 代码
.scroll{ position:absolute; } .box{ overflow:hidden; position:relative; height:345px; } .box ul{ overflow:hidden; position:absolute; left:0px; top:0px; } .box ul li a{ font-size:14px; display:block; height:40px; line-height:40px; border-bottom:1px dashed #ccc; text-indent:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
js代码
$(function(){ //复制一分代码 var copy = $('.scroll').html(); $('.scroll').append(copy); //动态执行函数 var num = 0; function goLeft() { //345垂直的高度 if (num == -345) { num = 14; //如果有抖动可以进行调节 } num -= 1; $(".scroll").css({top: num}) } //设置滚动速度20 var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止 $(".scroll").hover(function() { clearInterval(timer); }, function() { timer = setInterval(goLeft, 20); }) });