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函数中的内容并在其周围放置一个计时器。希望这会有所帮助。

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

1 个答案: