jquery 页面左右滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。页面左右滚动通常指的是通过 JavaScript 或 jQuery 实现的水平滚动效果。

类型

手动滚动：通过点击按钮或触发事件来实现页面的水平滚动。
自动滚动：设置定时器，使页面在一定时间后自动向左或向右滚动。
平滑滚动：通过动画效果实现平滑的水平滚动。

应用场景

导航菜单：实现水平导航菜单的滚动效果。
图片轮播：在图片轮播中实现水平滚动效果。
内容展示：在有限的空间内展示更多内容，通过滚动来查看更多信息。

示例代码

手动滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 手动滚动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #scroll-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }
        #scroll-container div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <button id="scroll-left">向左滚动</button>
    <button id="scroll-right">向右滚动</button>

    <script>
        $(document).ready(function() {
            var container = $('#scroll-container');
            var scrollAmount = 220; // 每次滚动的距离

            $('#scroll-left').click(function() {
                container.animate({scrollLeft: '-=' + scrollAmount}, 500);
            });

            $('#scroll-right').click(function() {
                container.animate({scrollLeft: '+=' + scrollAmount}, 500);
            });
        });
    </script>
</body>
</html>

自动滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 自动滚动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #scroll-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }
        #scroll-container div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

    <script>
        $(document).ready(function() {
            var container = $('#scroll-container');
            var scrollAmount = 220; // 每次滚动的距离
            var scrollInterval = setInterval(function() {
                container.animate({scrollLeft: '+=' + scrollAmount}, 1000, function() {
                    if (container.scrollLeft() >= container.get(0).scrollWidth - container.width()) {
                        container.scrollLeft(0);
                    }
                });
            }, 3000); // 每 3 秒滚动一次
        });
    </script>
</body>
</html>