水平jquery滾動使用位置：絕對;與恆定滾動

Question

我已經設法得到這麼遠，它適用於固體寬度的div，但不能解決如何操作它的工作時div的寬度變化。

問題：如何讓這個函數考慮到每個'圓'後不同的div寬度？

var horizontalScroller = function($elem) { 
    var left = parseInt($elem.css("left")); 
    var temp = -1 * $('#horizontalScroller li').width(); 
    if(left < temp) { 
     left = $('#horizontalScroller').width(); 
     $elem.css("left", left); 
    } 
    $elem.animate({ left: (left-60) }, 2000, 'linear', function() { 
     horizontalScroller($(this)); 
    }); 
} 


$(document).ready(function() { 
    var i = 0; 
    $("#horizontalScroller li").each(function() { 
      $(this).css("left", i); 
      i += $(this).width(); 
      horizontalScroller($(this)); 
    }); 

}); 

工作示例（固定寬度）：http://jsfiddle.net/GL5V3/
工作示例（具有不同寬度）：http://jsfiddle.net/wm9gt/

Answer 1

嗯，這是輕度的樂趣，瞭解你的代碼是如何工作的，但在此之前我做到了...

我改寫成這樣：(working fiddle)

function horizontalScroller(ulSelector) { 
    var horizontalSpan=0; 
    var collection=[]; 
    function animate(index) { 
    var cur=collection[index]; 
    var left=parseInt(cur.elem.css('left')); 
    if(left < cur.reboundPos) { 
     left+=horizontalSpan; 
     console.log(left); 
     cur.elem.css('left',left); 
    } 
    cur.elem.animate(
     { left: (left-60) }, 
     2000, 
     'linear', 
     function() {animate(index)} 
    ); 
    } 
    $(ulSelector).find('li').each(function() { 
    var $this=$(this); 
    var width=$this.width(); 
    $this.css('left',horizontalSpan); 
    collection.push({reboundPos: -1 * width, elem: $this}); 
    horizontalSpan+=width; 
    animate(collection.length-1); 
    }); 
    console.log(collection); 
    console.log(horizontalSpan); 
} 


$(document).ready(function() { 
    horizontalScroller('#horizontalScroller'); 
}); 

然後我又回到了你的代碼，這樣做：

var horizontalSpan = 0;// swapped i for a "global" variable 
var horizontalScroller = function($elem) { 
    var left = parseInt($elem.css("left")); 
    var temp = -1 * $elem.width();// updated to the correct width 
    if(left < temp) {// now out of bounds is properly calculated 
     left += horizontalSpan;// proper "wrapping" with just one addition 
     $elem.css("left", left); 
    } 
    $elem.animate({ left: (left-60) }, 2000, 'linear', function() { 
     horizontalScroller($(this)); 
    }); 
} 


$(document).ready(function() { 
    $("#horizontalScroller li").each(function() { 
      $(this).css("left", horizontalSpan);// horizontalSpan!!! 
      horizontalSpan += $(this).width();// horizontalSpan!!! 
      horizontalScroller($(this)); 
    }); 
}); 

如果你有問題或需要調整它一下。我很樂意幫助你。但我的希望是，你會自己管理。

P.S.我最初的評論是粗魯的，你是水平滾動是好的豎起大拇指（但你希望這些.width()調用的一些值的方式不同）