jQuery是一种快速、简洁的JavaScript库，在网页制作中应用广泛。在实际的网站制作中，常常需要制作滚动内容，而jQuery提供的div循环滚动功能可以帮助我们轻松实现这个效果。
以下是一个简单的div循环滚动实例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery div循环滚动实例</title>
<style type="text/css">
.scroll-box {
height: 200px;
overflow: hidden;
}
.scroll-content {
height: auto;
margin: 0;
padding: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
setInterval(function() {
var first = $('.scroll-content div:first');
$('.scroll-content').animate({marginTop: '-=50px'}, 500, function() {
first.remove().appendTo('.scroll-content');
$('.scroll-content').css('marginTop', '0');
});
}, 2000);
});
</script>
</head>
<body>
<div class="scroll-box">
<div class="scroll-content">
<div>第一条滚动内容</div>
<div>第二条滚动内容</div>
<div>第三条滚动内容</div>
<div>第四条滚动内容</div>
<div>第五条滚动内容</div>
</div>
</div>
</body>
</html>首先，在CSS样式表中设置scroll-box的高度和overflow:hidden，以隐藏滚动内容超出盒子高度的部分；在scroll-content类中设置高度为auto，以允许内容自动调整高度。
然后，在JavaScript代码中，我们使用setInterval（定时器函数）来重复执行操作。首先，我们选择scroll-content的第一个子元素，将scroll-content向上移动50个像素，实现滚动效果；然后，将第一个元素删除并添加到scroll-content的末尾，以允许下一次滚动使用；最后，将滚动内容的marginTop属性重置为0，以保证循环滚动。
通过以上方法，我们轻松实现了一个简单的jQuery div循环滚动效果。在实际网站制作中，我们可以根据需要进一步优化和定制。