Javascript 引导转盘使文本逐字显示

我使用的是滑动条的引导转盘，每张幻灯片上都有一些文字

我想把幻灯片上的文字一个字母一个字母地写下来

我几乎解决了这个问题

但有两个问题

在第一张幻灯片上，文本根本没有出现

如果用户转到浏览器上的其他选项卡，意味着如果当前窗口未处于焦点，则一切都会变得一团糟

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>

有入境市场的公司
我们帮助
有入境市场的公司
我们帮助
2具有入站营销的公司
我们帮助
3具有入站营销的公司
我们帮助

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, message, index, interval); }, interval); 
        } 
      }                 
       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });

$(document).ready(function() {  
    var showText = function (target, message, index, interval) { 
    if (index < message.length) { 
          $(target).append(message[index++]); 
          setTimeout(function () { showText(target, message, index, interval); }, interval); 
        } 
      };

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

       var str0 = $(this).find(".active .mystring").html();
       $('.active .demo-txt').html("");         
       showText(".active .demo-txt", str0, 0, 100);    

     $('#js-carousel').on('slid.bs.carousel', function () {

       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });

$（文档）.ready（函数（）{
$（'js carousel'）。carousel({
间隔时间：5000
});
$（'js carousel'）.on（'slided.bs.carousel'，函数（）{
var showText=函数（目标、消息、索引、间隔）{
如果（索引<消息长度）{
$（目标）.append（消息[index++]）；
setTimeout（函数（）{showText（目标、消息、索引、间隔）；}，间隔）；
} 
}                 
var str=$（this.find（“.active.mystring”）.html（）；
$（'.active.demo txt'）.html（“”）；
showText（“.active.demo txt”，str，0，100）；
});
});

这是因为您的函数在幻灯片事件中。开始时，旋转木马不会滑动

小提琴：

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, message, index, interval); }, interval); 
        } 
      }                 
       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });

$(document).ready(function() {  
    var showText = function (target, message, index, interval) { 
    if (index < message.length) { 
          $(target).append(message[index++]); 
          setTimeout(function () { showText(target, message, index, interval); }, interval); 
        } 
      };

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

       var str0 = $(this).find(".active .mystring").html();
       $('.active .demo-txt').html("");         
       showText(".active .demo-txt", str0, 0, 100);    

     $('#js-carousel').on('slid.bs.carousel', function () {

       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });

$（文档）.ready（函数（）{
var showText=函数（目标、消息、索引、间隔）{
如果（索引<消息长度）{
$（目标）.append（消息[index++]）；
setTimeout（函数（）{showText（目标、消息、索引、间隔）；}，间隔）；
} 
};
$（'js carousel'）。carousel({
间隔时间：5000
});
var str0=$（this.find（“.active.mystring”）.html（）；
$（'.active.demo txt'）.html（“”）；
showText（“.active.demo txt”，str0，0，100）；
$（'js carousel'）.on（'slided.bs.carousel'，函数（）{
var str=$（this.find（“.active.mystring”）.html（）；
$（'.active.demo txt'）.html（“”）；
showText（“.active.demo txt”，str，0，100）；
});
});

使用

setInterval

功能代替

settimeout

。当新幻灯片开始时，还可以使用

clearInterval

清除计划。（我想这是你的第二个问题。）

这是您的目标js文件：

$(document).ready(function() {    
    $('#js-carousel').carousel({
        interval: 5000
    });
    var handler;
    var interval = 5000;
    var index = 0;
    function showText(target, message, index, 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", str, index++, 100);         
        handler = setInterval(function(){
            showText(".active .demo-txt", str, index++, 100);
        }, 100);
     }

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

$（文档）.ready（函数（）{
$（'js carousel'）。carousel({
间隔时间：5000
});
var处理器；
var区间=5000；
var指数=0；
函数showText（目标、消息、索引、间隔）{
如果（索引<消息长度）{
$（目标）.append（消息[索引]）；
}
}
函数迭代（）{
if（处理程序）{
clearInterval（处理器）；
}
指数=0；
var str=$（this.find（“.active.mystring”）.html（）；
$（'.active.demo txt'）.html（“”）；
showText（“.active.demo txt”，str，index++，100）；
handler=setInterval（函数（）{
showText（“.active.demo txt”，str，index++，100）；
}, 100);
}
//在每个转盘幻灯片上更改：
$（'js carousel'）.on（'slided.bs.carousel'，迭代）；
//立即开始解决您的第一个问题：
bind（$（'#js carousel'））（）；
});

当选项卡处于非活动状态时，计时器可能会很棘手。我移动了代码并清除了超时，以确保在开始新幻灯片时超时是干净的

我注意到一个问题（并非总是），当从不同的选项卡切换回时，转盘实际上移动到下一张幻灯片的速度超过5秒，导致文本不完整

$（文档）.ready（函数（）{
$（'js carousel'）。carousel({
间隔时间：5000
});
var showText=函数（目标、消息、索引、间隔）{
如果（索引<消息长度）{
$（目标）.append（消息[index++]）；
计时器=设置超时（函数（）{
showText（目标、消息、索引、间隔）；
}，间隔）；
}
}，定时器；
//第一次，这会立即触发，而不是等待幻灯片移动
showText（“.active.demo txt”，$（“#js carousel”）.find（“.active.mystring”）.html（），0100）；
$（'js carousel'）.on（'slided.bs.carousel'，function（）{
//从上一张幻灯片中清除任何混乱的超时
清除超时（计时器）；
//清除上一个文本动画中可能不完整的消息
$（'.prevActive'）.removeClass（'prevActive'）.html（''）；
var str=$（this.find（“.active.mystring”）.html（）；
$（'.active.demo txt'）.addClass（'prevActive'）.html（“”）；
showText（“.active.demo txt”，str，0，100）；
});
});
.carousel内部{
位置：相对位置；
}
.旋转木马内部。叠加效果{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.6）；
}
.carousel内部。标题{
颜色：#ffffff；
字体大小：粗体；
位置：绝对位置；
排名：0；
底部：0；
保证金：自动0；
高度：100px；
z指数：9999；
左：5%；
}
.旋转木马内部。标题h1，
.旋转木马内部。标题h2{
字体大小：粗体；
线高：1.6；
}
.旋转木马内部。标题h1{
字体大小：64px；
}
.旋转木马内部。