水平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()调用的一些值的方式不同）