多次設置和清除間隔

Question

在滑塊的第一張幻燈片上，我得到了一些在一定間隔內變化的文本。 這是執行此操作的jQuery：

<script>
    var x = 0;
   var text = ["STRATEGICALLY", "COST-EFFECTIVELY", "EFFICIENTLY", "EXCEPTIONALLY"];
var counter = 0;
var elem = document.getElementById("banner-change");

var intervalID = setInterval(change, 1500);

function change() {

  jQuery(elem).fadeOut('slow', function() {
    jQuery(elem).text(text[counter++]);

    if (counter >= text.length) {
      counter = 0;
    }

    jQuery(elem).fadeIn('fast');

       if (++x === 5) {
       window.clearInterval(intervalID);
   }
  });

}

    </script>

滑塊看起來像這樣（縮短的代碼）：

<div id="myCarousel" class="hp-top carousel fade" data-ride="carousel" data-interval="6000">
<div class="carousel-inner">
<div class="item active"><img src="" alt="Chicago"/><div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">What makes</span> us <span class="slider-green">specialists?</span></p>
<p class="slider-text">We just do ip</p>
<p class="slider-text"><span id="banner-change" class="slider-green">exceptionally</span></p>
</div>
</div>
</div>

因此， <span id="banner-change" class="slider-green">的單詞會不斷變化。 這很好。 但是，它僅在第一次顯示第一個標語時才有效。 當我清除間隔時這是有道理的，因為每個單詞只應該顯示一次，但不確定如何做到這一點，以便每次第一個標語顯示時都重新開始間隔？

Answer 1

您可以使用輪播外衣觸發動作。 然后e.relatedTarget將引用幻燈片，該幻燈片正在視圖中。 因此，如果給它一個唯一的ID，則可以識別它並隨后執行任何操作。

$('#myCarousel').on('slide.bs.carousel', function (e) {
  if (e.relatedTarget.id === 'firstSlide') // do something
})