Setinterval（）函数需要重置

Question

我试图创建几个图片部分.Idea是动态更改这些图片，但我的问题是：当部分加载和动画完成整个过程停止但它应该继续再来一遍。

有人能帮助我实现吗？

谢谢。

这是到目前为止我的代码：

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

 
     var $slide = $('div.slideUp'); 
 
     $slide.removeClass('slideUp'); 
 
     $slide.next().addClass('slideUp'); 
 

 
    },2000); 
 

 

 
});

.slideSection{ 
 
\t background: #000; 
 
\t float: left; 
 
\t width: 100%; 
 
\t padding: 25px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t 
 

 
\t } 
 
.block{ 
 
\t width: 100%; 
 
\t float: left; 
 
\t display: none; 
 
} 
 

 
.block img { 
 
    float: left; 
 
\t width: 25%; 
 
\t height: 100px; 
 
\t padding: 10px; 
 
\t margin: 0; 
 
} 
 

 
.slideUp{ 
 
\t display: block; 
 
\t animation: slideUp 1s 1; 
 
\t position: relative; 
 
\t 
 
} 
 

 
@keyframes slideUp{ 
 
\t from{ 
 
\t \t opacity: .0; 
 
\t \t transform: translate(0, 300px); 
 
\t \t 
 
\t } 
 
\t to{ 
 
\t \t opacity: 1; 
 
\t \t transform: translate(0, 0); 
 

 
\t } 
 
}

<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"> 
 
\t \t <img src="img/js.png" alt="js"> 
 
\t \t <img src="img/css.png" alt="css"> 
 
\t \t <img src="img/query.png" alt="js"> 
 

 
</div> 
 

 
<div class="block"> 
 

 
     <img src="img/java.png" alt="css"> 
 
\t \t <img src="img/sql.png" alt="js"> 
 
\t \t <img src="img/js.png" alt="js"> \t 
 

 
</div> 
 

 
    <div class="block"> 
 

 
     <img src="img/query.png" alt="js"> 
 
     <img src="img/java.png" alt="css"> \t 
 

 
    </div> 
 

 
</section>

Answer 1

你的循环不是无限元素。您应该检查是否出现，然后取第一个收集元素。

查看下面的代码片段。

$(document).ready(function(){ 
 
\t \t 
 
    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{ 
 
\t background: #000; 
 
\t float: left; 
 
\t width: 100%; 
 
\t padding: 25px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t 
 

 
\t } 
 
.block{ 
 
\t width: 100%; 
 
\t float: left; 
 
\t display: none; 
 
} 
 

 
.block img { 
 
    float: left; 
 
\t width: 25%; 
 
\t height: 100px; 
 
\t padding: 10px; 
 
\t margin: 0; 
 
} 
 

 
.slideUp{ 
 
\t display: block; 
 
\t animation: slideUp 1s 1; 
 
\t position: relative; 
 
\t 
 
} 
 

 
@keyframes slideUp{ 
 
\t from{ 
 
\t \t opacity: .0; 
 
\t \t transform: translate(0, 300px); 
 
\t \t 
 
\t } 
 
\t to{ 
 
\t \t opacity: 1; 
 
\t \t transform: translate(0, 0); 
 

 
\t } 
 
}

<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"> 
 
\t \t <img src="img/js.png" alt="js"> 
 
\t \t <img src="img/css.png" alt="css"> 
 
\t \t <img src="img/query.png" alt="js"> 
 

 
</div> 
 

 
<div class="block"> 
 

 
     <img src="img/java.png" alt="css"> 
 
\t \t <img src="img/sql.png" alt="js"> 
 
\t \t <img src="img/js.png" alt="js"> \t 
 

 
</div> 
 

 
    <div class="block"> 
 

 
     <img src="img/query.png" alt="js"> 
 
     <img src="img/java.png" alt="css"> \t 
 

 
    </div> 
 

 
</section>

Answer 2

你可以保持区间运行，但改变你寻找下一个幻灯片的方法：检查是否有下一个，如果是的话，把它，否则选择第一个：因为最后一个元素没有next()

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

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