函数需要重置
函数需要重置
提问于 2017-01-16 22:22:51
我试图用双images.Idea创建部分，动态地更改这些图像，但我的问题是:当部分加载和动画完成时，整个过程停止，但是它应该继续，再来一次。
有人能帮我做到这一点吗？
谢谢。
到目前为止，我的代码如下：
$(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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-01-16 22:35:15
循环并不是无限的，因为最后一个元素没有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>
Stack Overflow用户
发布于 2017-01-16 22:33:18
您可以保持间隔运行，但更改查找下一张幻灯片的方式:检查是否有下一张幻灯片，如果有，请选择第一张幻灯片：
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');Stack Overflow用户
发布于 2017-01-16 22:58:11
谢谢大家的帮助我很感激。这是另一个正常工作的功能。
辛塞利
$(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);
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41685964
复制相关文章
相似问题
腾讯云开发者
