使用 jQuery 在 div 中滚动内容答案

【问题标题】：scrolling content in a div with jQuery使用 jQuery 在 div 中滚动内容
【发布时间】：2014-11-12 20:15:55
【问题描述】：

我正在尝试在 div 中垂直滚动内容。但是，我希望它循环，以便当 div 中的最后一项到达容器的顶部时，第一项跟随它，如果第一项已经在我的容器的顶部，我不想要上一个按钮可以工作，但我不知道如何做这两件事。任何帮助将不胜感激。

HTML

<div class="container">
<div class="block block-1">1</div>
<div class="block block-2">2</div>
<div class="block block-3">3</div>
<div class="block block-4">4</div>
<div class="block block-5">5</div>
<div class="block block-6">6</div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

jQuery

$( "#prev" ).click(function() 
    {
        $( ".block" ).animate({ "top": "+=50px" }, "slow" );
    });

$( "#next" ).click(function()
    {
        $( ".block" ).animate({ "top": "-=50px" }, "slow" );
    });

CSS

.container
        {
            position: relative;
            background-color: #f5f5f5;
            width: 590px;
            height: 330px;
            overflow: hidden;
            font-family: arial, sans;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

.block 
        {
            position: absolute;
            width: 90px;
            height: 90px;
            color: #fff;
        }

.block-1
        {
            background-color: #900;
        }

.block-2
        {
            top: 100px;
            background-color: #090;
        }

.block-3
        {
            top: 200px;
            background-color: #009;
        }

.block-4
        {
            top: 300px;
            background-color: #990;
        }

.block-5
        {
            top: 400px;
            background-color: #909;
        }

.block-6
        {
            top: 500px;
            background-color: #099;
        }

【问题讨论】：

标签： scroll jquery-animate

【解决方案1】：

如果你想让它循环，你可以做一个测试，每次 div 的垂直位置超出界限时，它就会移动到堆的底部，并在向上滚动时反转。本质上，您只需使用 $.remove()、$.append()、$.clone() 以正确的顺序剪切和粘贴元素。

【讨论】：