jquery无缝滚动

jQuery 无缝滚动实现方法

基础HTML结构

准备一个包含滚动内容的容器，外层需要设置overflow: hidden以确保内容不会溢出。示例结构如下：

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

CSS样式设置

为容器和内容添加必要的CSS样式，确保内容水平排列且容器隐藏溢出部分：

.scroll-container {
    width: 300px;
    overflow: hidden;
}
.scroll-content {
    white-space: nowrap;
    display: inline-block;
}
.scroll-content li {
    display: inline-block;
    width: 100px;
    padding: 10px;
}

jQuery动画逻辑

使用animate()函数实现向左滚动的动画效果，并在动画完成后重置位置以实现无缝循环：

function startScroll() {
    $('.scroll-content').animate(
        { marginLeft: '-100px' }, // 移动一个项目的宽度
        1000, // 动画时长
        function() {
            $(this).css('margin-left', '0').find('li:first').appendTo(this);
            startScroll(); // 递归调用实现循环
        }
    );
}
startScroll(); // 启动滚动

克隆内容优化性能

为避免频繁DOM操作，可预先克隆内容项以实现更流畅的无缝效果：

var $content = $('.scroll-content');
$content.append($content.html()); // 克隆内容

function scroll() {
    $content.animate(
        { marginLeft: -$content.width()/2 }, 
        3000, 
        'linear',
        function() {
            $(this).css({ marginLeft: 0 });
            scroll();
        }
    );
}
scroll();

响应式处理

通过计算容器宽度动态调整滚动速度，适应不同屏幕尺寸：

var speed = 50; // 像素/秒
var containerWidth = $('.scroll-container').width();

function responsiveScroll() {
    var duration = (containerWidth / speed) * 1000;
    $('.scroll-content').animate(
        { marginLeft: -containerWidth },
        duration,
        'linear',
        function() {
            $(this).css('margin-left', '0').find('li:first').appendTo(this);
            responsiveScroll();
        }
    );
}

暂停/继续控制

添加鼠标事件控制滚动暂停与继续：

$('.scroll-container').hover(
    function() { $('.scroll-content').stop(); },
    function() { startScroll(); }
);

注意：实际项目中建议使用CSS3动画或专门的轮播插件（如Slick）获得更好的性能。以上代码需确保在DOM加载完成后执行，可通过$(document).ready()包装。