没有插件的无限流畅的水平滚动？

Question

我想创建一个无限的侧滚动div而不使用额外的插件(除了jquery).我找到了这个:http://www.smoothdivscroll.com/

问题不仅在于它是自己的插件,它还利用了jqueryUI ...添加了一堆代码权重.

这就是我所拥有的

<div id="columnWrapper">
    <div id="columnSlider">
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
    </div>
</div>

对于javascript,我有一个设置为每10毫秒的计时器,每次操作enitre #columnScroll的左边距几个像素.

var sliderInt=self.setInterval(function(){
    $('#columnSlider').css('margin-left',totalMargin);
    totalMargin -= .5;
},10);

我真正需要的是#columnSlider的左侧,并且当左侧离开屏幕时,同一div的右侧将对接,以便它无限地向侧面滚动.

提前致谢

Answer 1

您可以尝试这样的方法，它实际上是我编写的一个用于重用的插件，但您可以将其从插件形式中取出，如下所示，您只需要添加正确的元素并更改元素引用，我认为这目前是一个也可以垂直滚动，但是 - 很容易改变：

function initInfiniteScroll(){
var $carousel, $prevTrigger, $nextTrigger, itemHeight;
    $carousel = $('#alternate-views');
    $prevTrigger = $('.scroll-up');
    $nextTrigger = $('.scroll-down');
    itemHeight = 106;
    $allItems = $carousel.children().clone();
    $allItems.appendTo($carousel);
    $allItems.prependTo($carousel);

    $prevTrigger.click(function() {
        scrollCarousel('up');
        return false;
    });
    $nextTrigger.click(function() {
        scrollCarousel();
        return false;
    }); 

    function scrollCarousel(direction) {
        if (direction == 'up')
        {
            $carousel.animate({
                'top': '+=' + itemHeight
            },1000,function(){
                $carousel.children(':last').clone().prependTo($carousel);
                $carousel.children(':last').remove(); 
                $carousel.css({'top':'-' + itemHeight + 'px'});
            });
        }
        else
        {
            $carousel.animate({
                'top': '-=' + itemHeight
            },1000,function(){
                $carousel.children(':first').clone().appendTo($carousel);
                $carousel.children(':first').remove();  
                $carousel.css({'top':'-' + itemHeight + 'px'});
            });
        }
    }
}

这确实会克隆整个负载并将其放在原始滚动条的任一侧 - 但您可以删除它，如果您使用的是 jquery 1.4+，您也可以取出克隆，而是在滚动时分离并重新添加项目。

另外 - 如果您想要执行 setTimeout，只需使用 click 函数中的内容并在其周围放置一个计时器。希望这可以帮助。