我怎樣才能讓我的滑環不斷

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>