Question

我使用以下代码进行简单的轮播。在你到达第三个报价项目之后，我想重复它。

有人可以帮忙吗？谢谢。

这是JS：

    <script>
show()
     $(function() {
    var currentCarousel = 0;
    function changeCarousel() {
      $('.quote-item').hide();
      $('.quote-item:eq('+ currentCarousel +')').show();
      currentCarousel = currentCarousel + 1;
      setTimeout(function(){ changeCarousel(); }, 8000);
    }
    changeCarousel();
    $('.quote-change').click(function(e) {
    e.preventDefault();
      changeCarousel();
    });
      });
    </script>

这是HTML：

 <div class="quote" >
  <div class="quote-item">
    <div class="quote-image">
      <img src="" alt="quote 1">
    </div>                                    
    <div class="quote-text">
        quote text one
    </div>
  </div>
    <div class="quote-item">
    <div class="quote-image">
      <img src="" alt="quote 1">
    </div>                                    
    <div class="quote-text">
        quote text Two...
    </div>                                 
  </div>
    <div class="quote-item">
    <div class="quote-image">
      <img src="" alt="quote 1">
    </div>                                    
    <div class="quote-text">
        quote text THREE...
    </div>                                 
  </div>
<a href="#" class="quote-change">next</a>
</div>

Answer 1

更新您的changeCarousel，以便if currentCarousel >= slides.length重置为0

    function changeCarousel() {
      $('.quote-item').hide();
      $('.quote-item:eq('+ currentCarousel +')').show();          
      if(currentCarousel >= slides.length ){
        currentCarousel = 0;
      } else{
        currentCarousel++;
      }
      setTimeout(function(){ changeCarousel(); }, 8000);
    }

Answer 2

试试这个：

$(function () {
    var currentCarousel = 0;
    var timeoutID = null;
    var timeoutDuration = 2000;
    var quoteChange = $('.quote-change');
    var quoteItems = $('.quote-item');
    var numQuotes = quoteItems.length;
    
    function changeCarousel() {
        quoteItems.hide();
        quoteItems.eq(currentCarousel).show();
        currentCarousel += 1;
        if (currentCarousel === numQuotes) { currentCarousel = 0; }
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function () {
            changeCarousel();
        }, timeoutDuration);
    }
    changeCarousel();
    quoteChange.click(function (e) {
        e.preventDefault();
        changeCarousel();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quote">
    <div class="quote-item">
        <div class="quote-image">
            <img src="" alt="quote 1" />
        </div>
        <div class="quote-text">quote text one</div>
    </div>
    <div class="quote-item">
        <div class="quote-image">
            <img src="" alt="quote 2" />
        </div>
        <div class="quote-text">quote text Two...</div>
    </div>
    <div class="quote-item">
        <div class="quote-image">
            <img src="" alt="quote 3" />
        </div>
        <div class="quote-text">quote text THREE...</div>
    </div>
<a href="#" class="quote-change">next</a>

</div>

此外，您错过了clearTimeout();，因为您的click处理程序也调用了相同的changeCarousel()函数。有冲突。

所以想象一下，默认情况下，当您决定点击setTimeout按钮时，changeCarousel()会一直递归调用next并假设它正好在另一个循环（4秒）的中间位置并自己跳到下一个旋转木马项目。因此，您新显示的旋转木马项目现在只能在剩余的4秒内保持可见，但它应该有一个完整的8秒停留。有意义吗？

希望你觉得它很有用。

让JS轮播重复

2 个答案: