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

您可以使用carousel evelts触发操作。然后，e.relatedTarget会引用幻灯片，即滑入视图。因此，如果您给它一个唯一的ID，您可以识别它并在之后执行任何操作。

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

多次设置和清除间隔

1 个答案: