jquery实现列表自动循环滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。列表自动循环滚动是指在一个固定高度的容器中，内容自动从上往下滚动，当滚动到底部时，内容又重新从顶部开始滚动。

类型

列表自动循环滚动主要分为两种类型：

纯 JavaScript 实现：不依赖任何库，完全使用原生 JavaScript 实现。
使用 jQuery 实现：利用 jQuery 的便利性和丰富的 API 来实现。

应用场景

新闻滚动：在网站首页或新闻页面，实现新闻列表的自动滚动。
广告轮播：在网页顶部或底部实现广告的自动循环播放。
社交媒体动态：在社交媒体平台上，实现用户动态的自动滚动。

实现方法

以下是使用 jQuery 实现列表自动循环滚动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery List Auto Scroll</title>
    <style>
        #scroll-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        #scroll-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #scroll-list li {
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <ul id="scroll-list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $scrollList = $('#scroll-list');
            var $firstItem = $scrollList.find('li:first');
            var itemHeight = $firstItem.outerHeight();
            var scrollContainerHeight = $('#scroll-container').height();

            function scroll() {
                $scrollList.animate({
                    marginTop: -itemHeight
                }, 1000, function() {
                    $scrollList.css({ marginTop: 0 }).append($firstItem.clone());
                    $firstItem.remove();
                    $firstItem = $scrollList.find('li:first');
                });
            }

            setInterval(scroll, 3000);
        });
    </script>
</body>
</html>