使 JS 轮播重复

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() 并假设当您决定单击 [=17= 时它正好在另一个循环的中间（4 秒） ] 按钮并自行跳转到下一个轮播项目。因此，您新显示的轮播项目现在只会在剩余的 4 秒内保持可见，但它应该有整整 8 秒的停留时间。有道理吗？

希望你觉得有用。

使 JS 轮播重复

Make JS carousel repeat

html

javascript

carousel