html - 如何无限连续自动滚动充满图像的div元素？

Question

我正在尝试制作一个网页，其中包含三个 div，每个 div 有 7 张图片。它们的 div 中的那些图像并排放置。

我正在尝试为这 3 个 div 实现自动滚动。当第一个 div 滚动时说 x% 到顶部并且不可见，那么 x% 应该在底部。

我尝试了各种资源和方法，但没有一个能清楚地说明事情。目前这是我的 html 文件:

<div class="images">

    <div id="row1" class="row">
        <div id="im1" class="column">
            <img src="img/img1.jpg" alt="movie">
        </div>

        <div id="im2" class="column">
            <img src="img/img2.jpg" alt="movie">
        </div>

        <div id="im3" class="column">
            <img src="img/img3.jpg" alt="movie">
        </div>

        <div id="im4" class="column">
            <img src="img/img4.jpg" alt="movie">
        </div>

        <div id="im5" class="column">
            <img src="img/img5.jpg" alt="movie">
        </div>

        <div id="im6" class="column">
            <img src="img/img6.jpg" alt="movie">
        </div>

        <div id="im7" class="column">
            <img src="img/img7.jpg" alt="movie">
        </div>
    </div>

    <div id="row2" class="row">
        <div id="im8" class="column">
            <img src="img/img8.jpg" alt="movie">
        </div>

        <div id="im9" class="column">
            <img src="img/img9.jpg" alt="movie">
        </div>

        <div id="im10" class="column">
            <img src="img/img10.jpg" alt="movie">
        </div>

        <div id="im11" class="column">
            <img src="img/img11.jpg" alt="movie">
        </div>

        <div id="im12" class="column">
            <img src="img/img12.png" alt="movie">
        </div>

        <div id="im13" class="column">
            <img src="img/img13.jpeg" alt="movie">
        </div>

        <div id="im14" class="column">
            <img src="img/img14.jpg" alt="movie">
        </div>
    </div>

    <div id="row3" class="row">
        <div id="im15" class="column">
            <img src="img/img15.jpg" alt="movie">
        </div>

        <div id="im16" class="column">
            <img src="img/img16.jpg" alt="movie">
        </div>

        <div id="im17" class="column">
            <img src="img/img17.jpg" alt="movie">
        </div>

        <div id="im18" class="column">
            <img src="img/img18.jpg" alt="movie">
        </div>

        <div id="im19" class="column">
            <img src="img/img19.jpg" alt="movie">
        </div>

        <div id="im20" class="column">
            <img src="img/img20.jpg" alt="movie">
        </div>

        <div id="im21" class="column">
            <img src="img/img21.jpg" alt="movie">
        </div>
    </div>

</div>

这是我的 CSS 文件:

html, body {
    background-color: #222222;
    overflow: hidden;
}

.column {
    float: left;
}

.column img {
    width:  200px;
    height: 300px;
}

.images {
    opacity: 0.6;
}

.row {
    clear: both;
    display: table;
}

.column img {
    position: relative;
    -webkit-animation: bannermove 10s linear infinite;
    animation: bannermove 10s linear infinite;
}


@keyframes bannermove {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-200%);
    }
}

这会使那些 div 滚动，但正如我所说，已经滚动到顶部且不可见的部分不会回到底部。

如有任何帮助，我将不胜感激。

Answer 1

$("html, body").animate({ scrollTop: "300px" }, 1000);

您可以使用 JQuery 来做到这一点。将“300px”替换为您想要的高度。为计时器设置超时以自动滚动