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>