无限垂直滚动div元素

Question

我有垂直滚动滑块的示例

[示例]：http://jsfiddle.net/e5dtyLjw/

我想像无限一样做这个样本，在滚动结束时的样本上，它会到顶部 我不想要它，我想要它像无限一样

这是我的代码：

var itemCount = 10, activeScroll = 0, countScroll = 0;
setInterval(function() {
    if(countScroll == (itemCount - 6)) {
        activeScroll = 0;
        countScroll = 0;
        $('#list').animate({scrollTop: 0});
    }
    else {
        activeScroll += 40;
        countScroll += 1;
        $('#list').animate({scrollTop: activeScroll});            
    }
}, 1000);

更新：我确实尝试了一些新的东西，我想要这样，但是这样。没有效果：/

http://jsfiddle.net/e5dtyLjw/2/

Answer 1

如果我没听错的话，这就是你要找的东西

setInterval(function(){
    $('#list').stop().animate({scrollTop:40},400,'swing',function(){
        $(this).scrollTop(0).find('span:last').after($('span:first', this));
    });
}, 1000);

JSFiddle

如果你想要那种幻灯片效果，你必须使用 .animate()

Answer 2

重新排序<li> 元素

jQuery.animate 的第四个参数是完成回调。将动画设置为仅滚动每个项目，并设置回调以重新排序元素本身

$element
    .scrollTop(0) // force us back to the top
    .find('span:last') // grab the last element 
    .after($('span:first', this)) // move the first element AFTER the current last element
;

完整的解决方案

我更喜欢线性运动，所以我将滚动动画的持续时间 (950) 设置为非常接近超时持续时间 (1000)。这使得整个东西看起来像一个恒定的线性滚动。将滚动设置为 100 以查看我在说什么。

var options = {
    scroll: 950, // duration of scroll animation between each item
    pause: 1000, // time to stop on each item
    height: 40   // outer-height of element (height and padding), should instead be calculated
};

setInterval(function(){
    $('#list').stop().animate({scrollTop:options.height},options.scroll,'linear',function(){
        $(this).scrollTop(0).find('span:last').after($('span:first', this));  // shift the order of the LI elements
    });
}, options.pause);

http://jsfiddle.net/FabioLux/hfa2mu0f/