jQuery的无限滚动循环

的JavaScript：

var scroller = function() { 
    $('#holder div').animate({ 
     left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3 
    }, 10, 'linear', function() { 
     if ($(this).position().left < -$('li:first-child', this).width()) { 
      w = $('li:first-child', this).totalWidth(); 
      $('li:first-child', this).appendTo('ul', this); 
      $(this).css('left', $(this).position().left + w); 
     } 
    }); 
}; 

$.fn.extend({ 
    totalWidth: function() { 
     return this.outerWidth() + parseInt(this.css('margin-left'), 10) + parseInt(this.css('margin-right'), 10); 
    } 
}); 
wdth = 0; 
$('#marquee ul li').each(function() { 
    wdth += $(this).totalWidth(); 
}); 
$('#holder div').width(wdth); 
var to; 
$('#prev, #next').css('top', ($('#marquee').outerHeight() - $('#prev').outerHeight())/2).live('mousedown mouseup', function(e) { 
    $t = $(this); 
    if (e.type == 'mousedown') { 
     to = setInterval(scroller, 15); 
    } 
    else { 
     clearInterval(to); 
    } 
});

HTML：

<div id="marquee"> 
    <div id="prev"><</div> 
    <div id="next">></div> 
    <div id="holder"> 
     <div> 
     <ul> 
      <li>Part 1</li> 
      <li>Part 2</li> 
      <li>Part 3</li> 
      <li>Part 4</li> 
      <li>Part 5</li> 
      <li>Part 6</li> 
      <li>Part 7</li> 
      <li>Part 8</li> 
      <li>Part 9</li> 
      <li>Part 10</li> 
     </ul> 
    </div> 
    </div> 
</div>

CSS：

* { 
    font-family: verdana; 
    font-size: 12px; 
} 
#marquee { 
    top: 50px; 
    position: relative; 
    width: 80%; 
    height: 34px; 
    background-color: #CCC; 
    margin: 0 auto; 
    padding: 0; 
} 
#holder { 
    overflow: hidden; 
position: absolute; 
    left: 5px; 
    right: 5px; 
    top: 5px; 
    bottom: 5px; 
} 
#holder div { 
    position: absolute; 
} 
#marquee ul li { 
    display: inline-block; 
    float: left; 
    margin-left: 5px; 
    padding: 5px 7px; 
    background-color: #555; 
} 
#marquee ul li:nth-child(2n+1) { 
background-color: #888; 
} 
#marquee ul li:first-child { 
    margin-left: 0; 
} 
#prev, #next { 
    position: absolute; 
    top: 10px; 
    background-color: #66F; 
    padding: 2px; 
    cursor: pointer; 
    z-index: 9002; 
} 
#prev { 
    left: -13px; 
    border-radius: 5px 0 0 5px; 
} 
#next { 
    right : -13px; 
    border-radius: 0 5px 5px 0; 
}

我试图做到的，是在鼠标按下滚动循环，停在鼠标松开。

我已经能够使其滚动，然后循环，但它在每一个循环改变的“跳跃”。

有没有人有任何想法？

我编辑了小提琴以删除CSS规则，也稍微编辑了代码。

原来，当它离开滚动，它跳回到约20像素，这是为了看起来由CSS规则更糟糕！

而且动画的推移在10ms的，但它的每15ms的循环，由于事实，即鼠标松开的循环将持续一个位。

权不循环，因为，因为我不知道该怎么办了左边，我不会浪费时间做正确错误地滚动时，我可以简单地让它正确地滚动，当它准备好了。

我不使用插件，因为我想学习如何做自己（固执！）

来源

2011-12-11 Andrew Willis

出于好奇，有没有你不使用，做了很多插件的一个理由这已经？而且，右侧的滚动箭头根本不会循环。 –

就这么你知道，我继续向问题中添加JSFiddle代码。这是因为我们希望即使该网站出现问题，该问题也具有价值。 –

你能解释一下'跳'部分吗？你的意思是分配给每个“Part＃”框的颜色？ – nsanders

叉形您的小提琴和添加代码），消除了跳动，同时滚动和b）支票和将第一<li>到列表的末尾（如果有空间），而滚动右（下）

检查此琴：http://jsfiddle.net/CRy4Q/15/

来源

2011-12-17 06:21:21 techfoobar

jQuery的无限滚动循环

回答

相关问题