我正在尝试用几个图像创建部分。想法是动态更改这些图像,但我的问题是:当部分加载并且动画完成时整个过程停止但它应该继续 从头再来。
有人可以帮我实现吗?
谢谢。
到目前为止,这是我的代码:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
@keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
最佳答案
你可以保持间隔运行,但改变你寻找下一张幻灯片的方式:检查是否有下一张,如果有,就拿下一张,否则选择第一张:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');
关于javascript - setinterval() 函数需要重新设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41685964/