js无缝滚动，有什么错误？

2023-04-19 20:01:02JavaScript032

js无缝滚动，有什么错误？,第1张

无缝滚动通常采用一个源版块，一个复制版块，两块并排合成一个主体，在一个较小范围的母版块里并排滚动。假设向上滚动那么js每隔几十毫秒设置主体头部减一js判断当版块2的头部减母版块的头部小于等于零时就设置版块主体头部等零，这样就实现了一个循环如果你的判断有误或者错误赋值或者这个主体总长还没有母版块长就会失灵。

下面的使用Jquery实现，使用的时候请引用Jquery.js，向上滚动看看js那里提示修改left为up即可。

.scrollleft{width:491px float:left padding-top:15px}

.scrollleft li{float:leftdisplay:inlinewidth:195pxtext-align:center}

</style> <script> $.fn.imgscroll = function(o){

var defaults = {

speed: 40,

amount: 0,

width: 1,

dir: "left"

}

o = $.extend(defaults, o)

return this.each(function(){

var _li = $("li", this)

_li.parent().parent().css({overflow: "hidden", position: "relative"}) //div

_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}) //ul

_li.css({position: "relative", overflow: "hidden"}) //li

if(o.dir == "left") _li.css({float: "left"})

//初始大小

var _li_size = 0

for(var i=0 i<_li.size() i++)

_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true)

//循环所需要的元素

if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"})

_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone())

_li = $("li", this)

//滚动

var _li_scroll = 0

function goto(){

_li_scroll += o.width

if(_li_scroll > _li_size)

{

_li_scroll = 0

_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll })

_li_scroll += o.width

}

_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount)

}

//开始

var move = setInterval(function(){ goto() }, o.speed)

_li.parent().hover(function(){

clearInterval(move)

},function(){

clearInterval(move)

move = setInterval(function(){ goto() }, o.speed)

})

}

$(document).ready(function(){

$(".scrollleft").imgscroll({

speed: 40, //图片滚动速度

amount: 0, //图片滚动过渡时间

width: 1, //图片滚动步数

dir: "left" // "left" 或 "up" 向左或向上滚动

})

}) </script> <div class="scrollleft">

<ul>

<li>