问函数需要重置
EN

Stack Overflow用户

提问于 2017-01-16 14:22:51

回答 3查看 139关注 0票数 0

我试图用双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>

javascript

jquery

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-01-16 14: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>

票数 0

Stack Overflow用户

发布于 2017-01-16 14:33:18

您可以保持间隔运行，但更改查找下一张幻灯片的方式:检查是否有下一张幻灯片，如果有，请选择第一张幻灯片：

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

票数 1

Stack Overflow用户

发布于 2017-01-16 14: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);
});