jquery 列表循环滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。列表循环滚动是指在一个列表中实现元素的循环滚动效果，通常用于展示内容更新、广告轮播等场景。

类型

水平滚动：元素在水平方向上循环滚动。
垂直滚动：元素在垂直方向上循环滚动。

应用场景

广告轮播：在网站首页展示多个广告，实现自动循环滚动。
新闻滚动：在新闻网站展示最新新闻，实现自动循环滚动。
社交媒体动态：在社交媒体平台上展示用户动态，实现自动循环滚动。

示例代码

以下是一个使用 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 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: 10px;
            border-bottom: 1px solid #ccc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</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>
        $(document).ready(function() {
            function scrollList() {
                var $list = $('#scroll-list');
                $list.animate({
                    marginTop: -200
                }, 1000, function() {
                    $list.css({ marginTop: 0 }).append($list.find('li:first'));
                });
            }

            setInterval(scrollList, 2000);
        });
    </script>
</body>
</html>