使用jQuery在div中滚动内容

Question

我正在尝试在div中垂直滚动内容。然而，我希望它循环，这样当div中的最后一项到达容器的顶部时，第一项跟随它，如果第一项已经在容器的顶部，我不希望上一步按钮工作，但我不确定如何做这两件事。任何帮助都将不胜感激。

JSFIDDLE

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;
        }

Answer 1

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