Question

我尝试在div中垂直滚动内容。但是，我希望它循环，以便当div中的最后一个项目到达容器的顶部时，第一个项目跟随它，如果第一个项目已经在我的容器的顶部，我不会＆＃39;我希望前一个按钮有效，但我不确定如何做这两件事。任何帮助将不胜感激。

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（）按正确的顺序剪切和粘贴元素。

使用jQuery在div中滚动内容

1 个答案: