JavaScript – Bootstrap carousel让文字逐字出现

我正在使用引导旋转木马的滑块,每个幻灯片上都有一些文字.

我想把幻灯片中的文字通过信件写给一封信.

我几乎解决了

但有两个问题

>在第一张幻灯片上,文字不会出现
>如果用户访问浏览器上的其他选项卡意味着如果当前窗口不在焦点,那么一切都会变得混乱.

Here is my fiddle

HTML

<main>
      <div class="container">
        <div class="block-wrap">
          <div id="js-carousel" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listBox">
              <div class="item active">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
                <div class="caption">

                  <div class="mystring hide">companies with Inbound Marketing</div>
                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
                <div class="caption">
                <div class="mystring hide">companies with Inbound Marketing</div>

                  <h4>We help  <div class="demo-txt "></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
                <div class="caption">
                <div class="mystring hide">2companies with Inbound Marketing</div>

                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
                <div class="caption">
                <div class="mystring hide">3companies with Inbound Marketing</div>

                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>
              <div class="overlay-effect"></div>
            </div>
          </div>
        </div> 
      </div>
    </main>

JS：

$(document).ready(function() {    
     $('#js-carousel').carousel({
        interval: 5000
    });

     $('#js-carousel').on('slid.bs.carousel',function () {
      var showtext = function (target,message,index,interval) { 
        if (index < message.length) { 
          $(target).append(message[index++]); 
          setTimeout(function () { showtext(target,interval); },interval); 
        } 
      }                 
       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showtext(".active .demo-txt",str,100);          
     });
    });

解决方法

而不是settimeout使用setInterval函数.当新的幻灯片开始时,也可以使用clearInterval来清除schedular. (我认为这是你的第二个问题.)

这是您的目标js文件：

$(document).ready(function() {    
    $('#js-carousel').carousel({
        interval: 5000
    });
    var handler;
    var interval = 5000;
    var index = 0;
    function showtext(target,interval) { 
        if (index < message.length) { 
            $(target).append(message[index]); 
        }
    }

    function iteration() {
        if(handler){
            clearInterval(handler);
        }
        index = 0;
        var str = $(this).find(".active .mystring").html();
        $('.active .demo-txt').html("");
        showtext(".active .demo-txt",index++,100);         
        handler = setInterval(function(){
            showtext(".active .demo-txt",100);
        },100);
     }

     //on each carousel slide change: 
     $('#js-carousel').on('slid.bs.carousel',iteration);
     //start immediately for your first problem:
     iteration.bind($('#js-carousel'))();
});

原文地址：https://www.jb51.cc/js/152442.html