2

我已经做到了这一点，它适用于实心宽度的 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/

4

1 回答 1

4

好吧，这有点有趣，了解您的代码是如何工作的，但是在我这样做之前...

我将其重写为：（工作小提琴）

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));
    });
});

如果您有问题或想稍微调整一下。我很高兴你能帮助你。但我希望你能自己管理。

PS我最初的评论很粗鲁，你的水平滚动是好的竖起大拇指（但你希望其中一些.width()调用的值会有所不同）

于 2013-01-09T04:08:41.900 回答