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()重复调度，以便在队列数组不包含任何其他函数时调用相同的函数

＆＃13;

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()

＆＃13;

hr {
  height: 4px;
  border: none;
  color: #333;
  background-color: #7BC83A;
  width: 70px;
  margin-left: 0;
}

.testimonial-item {
  display: block;
  opacity: 0.872447;
}

＆＃13;

<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>

＆＃13;

如何连续制作滑块循环

2 个答案: