当前位置：首页 > jquery

jquery无缝滚动

2026-04-08 08:46:22jquery

jquery无缝滚动

jQuery无缝滚动实现方法

基础HTML结构

<div class="scroll-container">
    <ul class="scroll-list">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
</div>

CSS样式设置

.scroll-container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.scroll-list {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

jQuery核心代码

$(function(){
    var $list = $('.scroll-list');
    var $items = $list.children('li');
    var itemHeight = $items.height();
    var current = 0;

    // 克隆首项实现无缝衔接
    $list.append($items.first().clone());

    function scroll(){
        current += 1;
        $list.animate({'top': -current * itemHeight}, 500, function(){
            if(current >= $items.length){
                $list.css('top', 0);
                current = 0;
            }
        });
    }

    // 设置定时器
    var timer = setInterval(scroll, 2000);

    // 鼠标悬停暂停
    $list.hover(function(){
        clearInterval(timer);
    }, function(){
        timer = setInterval(scroll, 2000);
    });
});

水平无缝滚动修改

将垂直滚动改为水平滚动时：

// 修改CSS
.scroll-list {
    white-space: nowrap;
    width: auto;
}
.scroll-list li {
    display: inline-block;
}

// 修改jQuery
var itemWidth = $items.width();
$list.css('width', $items.length * itemWidth + itemWidth);

function scroll(){
    current += 1;
    $list.animate({'left': -current * itemWidth}, 500, function(){
        if(current >= $items.length){
            $list.css('left', 0);
            current = 0;
        }
    });
}