水平jquery滚动条使用位置:绝对;不断滚动

Horizontal jquery scroller using position:absolute; with constant scroll

本文关键字：绝对 滚动 位置 jquery 滚动条 水平      更新时间：2023-09-26

我已经设法做到了这一点，它对固体宽度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/

这很有趣，我理解你的代码是如何工作的，但在我这样做之前…

我把它改写成这样:(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));
    });
});

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

注:我最初的评论是粗鲁的，你的水平滚动是ok的大拇指(但你希望一些.width()调用的值是不同的)

相关文章：