艾Q网

标题: jquery无限无缝文字轮播滚动 [打印本页]

作者: admin 时间: 2024-3-10 12:06
标题: 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);
})

});

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)