如何让我的滑块连续循环

Question

我使用这个 jquery 代码使我的推荐部分工作：

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

通过我的pen，我意识到离开链接几分钟后，当我返回时，滑块消失了。 有没有办法解决这个问题，让滑块一直循环？

另外，我如何添加导航项目符号，以便每次推荐发生变化时，项目符号也会改变颜色，如您在示例图像中看到的那样？

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>