我怎样才能让我的滑环不断

Question

我用这个jQuery代码，使我的推荐部分工作：通过我的pen

$(document).ready(function() { 
    var testimonialItem = $(".testimonial-wrapper .testimonial-item"); 
    var lengthOfItem = testimonialItem.length; 
    var counter = 0; 
    testimonialItem.hide(); 
    setTimeout(function(){ 
    startIteration(counter); 
    }, 1000); 
    function startIteration(counter) { 
    testimonialItem.eq(counter).fadeIn('slow', function() { 
     if(counter<=lengthOfItem){ 
     setTimeout(function(){ 
     testimonialItem.fadeOut('slow',function(){ 
     if (counter == lengthOfItem) { 
      counter = 0; 
     } 
     else{ 
      counter++; 
     } 
     setTimeout(function(){ 
      startIteration(counter); 
     }, 500);  
     }); 
     }, 2000); 
     } 
    }); 
    } 
}); 

看，我意识到分钟后离开该链接后，当我回去，滑块消失。 有没有一种方法可以解决这个问题，以便滑块始终循环？

也希望如果你能帮助添加naigation子弹，这样每次推荐的变化，子弹也改变颜色，你可以在示例图像看到先进

谢谢

Here my codepen

Answer 1

老实说，我不能说我已经解决了任何问题。我想你可能会遇到一些长期定时器的其他问题，但我的搜索结果并没有提出任何问题。

$(document).ready(function() { 
    var testimonialItem = $(".testimonial-wrapper .testimonial-item"); 
    var lengthOfItem = testimonialItem.length; 
    testimonialItem.hide(); 

    setTimeout(startIteration.bind(0), 1000); 

    function startIteration(counter) { 
    var item = testimonialItem.eq(counter) 
    item.fadeIn('slow', function() { 
     setTimeout(function() { 
     item.fadeOut('slow', function() { 
      startIteration((counter + 1) % lengthOfItem); 
     }); 
     }, 2000); 
    }); 
    } 
}); 

Answer 2

可以使用.queue()，.delay()，.promise()，.then()，反复调度调用相同功能时队列阵列不包含任何进一步的功能调用

var items = $(".testimonial-item").hide(); 
 

 
function testimonials() { 
 
    return $({}).queue("testimonials", $.map(items, function(el) { 
 
     return function(next) { 
 
     $(el).fadeIn("slow", function() { 
 
      $(this).delay(2000).fadeOut("slow", next) 
 
     }) 
 
     } 
 
    })).dequeue("testimonials").promise("testimonials") 
 
    .then(testimonials) 
 
} 
 

 
testimonials()

hr { 
 
    height: 4px; 
 
    border: none; 
 
    color: #333; 
 
    background-color: #7BC83A; 
 
    width: 70px; 
 
    margin-left: 0; 
 
} 
 

 
.testimonial-item { 
 
    display: block; 
 
    opacity: 0.872447; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-6 testimonial-wrapper"> 
 
    <div class="testimonial-item"> 
 
    <h3>Testimonials</h3> 
 
    <hr> 
 
    <h4>Shaf/ Seo</h4> 
 
    <blockquote> 
 
     <p>Hi</p> 
 
    </blockquote> 
 
    </div> 
 
    <div class="testimonial-item" style="opacity: 1;"> 
 
    <h3>Testimonials</h3> 
 
    <hr> 
 
    <h4>Shaje/ As</h4> 
 
    <blockquote> 
 
     <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p> 
 
    </blockquote> 
 
    </div> 
 
</div>