Question

我正在创建一个包含3个div列的网站，这些列有溢出：滚动。（见那里的屏幕：https://dl.dropboxusercontent.com/u/13769038/Schermafbeelding%202015-05-04%20om%2017.37.40kopie.jpg）

我想使图像滚动div无限，如：它们应该循环。 div的结尾应该与div无缝的开头连接。

我找到了这个小提琴：http://jsfiddle.net/2L23c/

这正是我想要做的，但它不会在我的HTML中工作。我认为它是使用身体滚动而不是单个div，因为我的身体是高度：100％它不会正确滚动。

任何使这项工作的方法？这是来自小提琴的JS：

        (function($){
    $(document).ready(function(){
        var html = $(".what").html();
        var what = '<div class="what">'+html+'</div>';
        $(window).scrollTop(1);
        $(window).scroll(function() {
            if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
                $(".what").last().after(what);
                if ($(".what").length > 2) {
                    $(".what").last().prev().remove();
                    $(window).scrollTop($(window).scrollTop() - $(".what").first().height());
                }
            }
            else if ( $(window).scrollTop() == 0 ) {
                $(".what").first().before(what);
                $(window).scrollTop($(".what").first().height());
                if ($(".what").length > 2) {
                    $(".what").last().remove();
                }
            }    
        });
    }); 
})( jQuery );

HTML

 <div class="what">
<img src="http://1.bp.blogspot.com/_27Ai9FzK4gE/SQzMV9lH2jI/AAAAAAAAAYU/zY9yp_HpCx8/s400/brick_wall.jpg"/>  
    <img src="http://4.bp.blogspot.com/-5Olo8-EgrZI/TZBqclcfPqI/AAAAAAAAC5c/920EyWecwiU/s640/background_brick_wall.jpg"/>

    <img src="http://www.macrobusiness.com.au/wp-content/uploads/2012/12/Brick-Wall-With-Lights-stock4221-large.png"/>
    <img src="http://parktownprawn.com/wp-content/uploads/2013/04/brick-stone-wall-grey.jpg"/>

CSS

div.what{
width:400px;
margin: 0 auto;
}
IMG{
max-width:400px;
}

马修

在div中以两种方式无限滚动

0 个答案: