首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >强制jQuery滚动条脚本无缝循环

强制jQuery滚动条脚本无缝循环
EN

Stack Overflow用户
提问于 2017-01-07 13:04:59
回答 0查看 162关注 0票数 0

我使用的是jQuery自动收报机类型的脚本。然而,它有一个特殊的问题,因为它不能无缝循环。它循环图像,然后有一个空白,然后它再次循环。我希望它在最后一个图像和第一个图像之间的距离相同的情况下无限循环。

我尝试过使用CSS处理子div的空白处,等等,但是不能让脚本删除周期之间的空格。有没有办法让这个脚本以无缝的方式循环?

脚本的JSFiddle与一些演示html。

脚本本身:

代码语言:javascript
复制
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
});
EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41518008

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档