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');

Answer 2

你的循环不是无限的，因为最后一个元素没有next()个元素。你应该检查它是否出现，然后取代第一个集合元素。

检查下面的代码段。

$(document).ready(function(){
		  
   setInterval(function(){

       var $slide = $('div.slideUp');
       $slide.removeClass('slideUp');
     
       var $nextSlide = $slide.next();
     
       if(!$nextSlide.length) {
          $nextSlide = $('div.block').eq(0); 
       }  
     
       $nextSlide.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 3

谢谢大家的帮助，我很感激。 这是另一个正常工作的功能。

诚恳

$(document).ready(function(){
var currentIndex = 0,
  items = $('.block'),
  itemAmt = items.length;

function cycleItems() {
  var item = $('.block').eq(currentIndex);
  items.removeClass('slideUp');
  item.addClass('slideUp');
}

var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 2000);
});