jQuery的 - 上單擊幻燈片重複動畫 - 環

Question

我想要實現的是，當用戶點擊右，左綠色層滑梯和紅色盒/ 藍色框將出現接近尾聲。

，當我們到達我的藍色盒我希望動畫繼續循環回開始而不是布萊恩空白喜歡這裏。

知道的任何幫助或建議，謝謝

看到這個搗鼓更好的主意：

http://jsfiddle.net/TheDeveloper/5LF8d/8/（單擊並按住右BTN）

var main_box = $("div.main_box:first"); 
$(document).ready(function() { 
    $('#left').mousedown(left_scrolling); 
    $('#right').mousedown(right_scrolling); 
    $('#right').mouseup(stopScrolling); 
    $('#left').mouseup(stopScrolling); 
}); 

function stopScrolling() { 
    // stop increasing scroll position 
    main_box.stop(); 

} 

function left_scrolling() { 
    main_box.animate({ 
     left: '+=50' 
    }, 100, 'linear', left_scrolling); 
} 

function right_scrolling() { 
    main_box.animate({ 
     left: '-=50' 
    }, 100, 'linear', right_scrolling); 
} 

Answer 1

function right_scrolling() { 
     if($('.last_box').offset().left < -$('.last_box').width()) 
      main_box.css('left','0px'); 
      ... 

Fiddle

左滾動

function left_scrolling() { 
     if($('.main_box').offset().left+50 >= 0) 
      main_box.css('left',(-main_box.width()+window.innerWidth)+'px'); 
      ... 

Answer 2

找出你main_box和檢查的範圍用於滾動功能中的邊界條件。

$(".main_box").position() 
Object {top: 401, left: -3558.5} 

如果你的左邊界是低然後說-3000你可以使用偏移「包裝」的對象返回給對方：

僞碼

if(Object.left < -3000){ 
    $(".main_box").offset({top: 401, left: 3558}); 
} 

類似的條件檢查和聲明將需要包裝股利，如果它正在旅行的另一個方向。

Answer 3

在這裏你去：http://jsfiddle.net/5LF8d/10/

var main_box = $("div.main_box:first"); 
window.leftVal=0; 
window.limit=parseInt($('.last_box').css('left').replace(/\D/g,'')); 
window.limit+=$('.last_box').width(); 
window.limit+=100; 
window.limit=window.limit*(-1); 

function right_scrolling() { 
    main_box.animate({ 
     left: '-=50' 
    }, 100, 'linear', right_scrolling); 
    window.leftVal-=50; 
    if(window.leftVal<=window.limit){ 
     main_box.css('left','0px'); 
     window.leftVal=0; 
    }