jquery div内容左右滚动

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery 可以轻松实现网页元素的动态效果，包括内容的左右滚动。

类型与应用场景

类型：jQuery 的滚动效果通常是通过动画函数 .animate() 来实现的。
应用场景：适用于需要动态展示信息的网站，如新闻滚动条、广告轮播、产品展示等。

示例代码

以下是一个简单的 jQuery 示例，用于实现一个 div 内容的左右滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 滚动示例</title>
    <style>
        #scrollDiv {
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid #ccc;
        }
        #scrollContent {
            display: inline-block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="scrollDiv">
    <div id="scrollContent">这是需要滚动的内容，可以是文字或图片。</div>
</div>

<script>
$(document).ready(function(){
    function scrollContent() {
        $('#scrollContent').animate({marginLeft: '-100%'}, 5000, 'linear', function() {
            $(this).css('marginLeft', '100%');
            scrollContent();
        });
    }
    scrollContent();
});
</script>

</body>
</html>