javascript - setinterval() 函数需要重新设置

Question

我正在尝试用几个图像创建部分。想法是动态更改这些图像，但我的问题是:当部分加载并且动画完成时整个过程停止但它应该继续 从头再来。

有人可以帮我实现吗？

谢谢。

到目前为止，这是我的代码:

$(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>

Answer 1

你可以保持间隔运行，但改变你寻找下一张幻灯片的方式:检查是否有下一张，如果有，就拿下一张，否则选择第一张:

  $slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
  $slide.addClass('slideUp');