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的無限滾動循環

回答

相關問題