Question

我正在使用jQuery自动收录器类型脚本。但它有一个特殊的问题，因为它无法无缝循环。它循环图像，然后有一个空白区域，然后它再次循环。我希望它循环无限循环，最后一个图像和第一个图像之间的距离相同。

我已经尝试过使用子div等边缘的CSS智能，但无法让脚本删除周期之间的空白区域。有没有办法让这个脚本以无缝方式循环？

带有一些demo html的脚本的

脚本本身：

function marquee(a, b) {
    var width = b.width();
    var start_pos = a.width();
    var end_pos = -width;

    function scroll() {
        if (b.position().left <= -width) {
            b.css('left', start_pos);
            scroll();
        }
        else {
            time = (parseInt(b.position().left, 10) - end_pos) *
                (10000 / (start_pos - end_pos)); // Increase or decrease speed by changing value 10000
            b.animate({
                'left': -width
            }, time, 'linear', function() {
                scroll();
            });
        }
    }

    b.css({
        'width': width,
        'left': start_pos
    });
    scroll(a, b);

    b.mouseenter(function() {     // Remove these lines
        b.stop();                 //
        b.clearQueue();           // if you don't want
    });                           //
    b.mouseleave(function() {     // marquee to pause
        scroll(a, b);             //
    });                           // on mouse over

}

$(document).ready(function() {
    marquee($('#band'), $('#band-content'));  //Enter name of container element & marquee element
});

Answer 1

您可以将此插件替换为Demo

风格：

#band {
    position:relative;
    width:1022px;
    height:120px;
    line-height:120px;
    overflow:hidden;
  background:blue;
}
#band-content {
    position:absolute;
    height:120px;
    line-height:120px;
    overflow:hidden;
}
#band-content img {
    position:relative;
    top:-1px;
    height:68px;
    vertical-align:middle;
    margin-right:68px;
}

.a {   
  overflow: hidden;  
}

.a1{
  list-style: none;
}

.a li {    
  float: left;  
}

HTML：

<div id="band" class="a">
                <ul id="band-content" class="a1">
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                    <li><img src=""></li>
                </ul>
            </div>

jQuery代码：

$("#band").scrollForever();

强制jQuery自动收录器脚本

1 个答案: