我正在尝试制作一个包含三个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滚动,但正如我所说,已经滚动到顶部且不可见的部分不会回到底部。
我将不胜感激。
答案 0 :(得分:0)
$("html, body").animate({ scrollTop: "300px" }, 1000);
您可以使用JQuery进行此操作。将“ 300px”替换为您想要的高度。设置超时时间以使计时器自动滚动