Bootstrap轮播使文本逐个字母出现

Posted 2023-02-22

技术标签:

【中文标题】Bootstrap轮播使文本逐个字母出现【英文标题】：Bootstrap carousel make text appearing letter by letter 【发布时间】：2016-08-02 02:11:24 【问题描述】：

我正在使用引导轮播作为滑块，在每张幻灯片上都有一些文字。

我希望幻灯片上的文字一个字母一个字母地出现。

我几乎解决了..

但是有两个问题

在第一张幻灯片上，文本根本没有出现如果用户转到浏览器上的某个其他选项卡意味着如果当前窗口不在焦点上，那么一切都会搞砸。

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

【问题讨论】：

【参考方案1】：

使用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'))();
);

【讨论】：

【参考方案2】：

这是因为你的函数在幻灯片事件中。开始时，轮播不滑动...

小提琴：https://jsfiddle.net/Lbasa2jh/5/

JS：

$(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);          
     );
    );

【讨论】：

感谢您这么快的回复！这似乎解决了第一个问题 1 。但是您是否也注意到如果当前窗口不在焦点上，那么一切都会变得一团糟。这是不是可能是carousal 没有停止并且js 逐字逐句继续工作的原因，反之亦然？我不知道我被打动了。我不明白你所说的“当前窗口不在焦点”是什么意思：-/ 就像你运行你的小提琴一样！一切都会正常工作，但是如果您更改浏览器中的选项卡，或者从 chrome 切换到 firefox，反之亦然，或者您最小化浏览器并转到桌面一段时间，然后再次回到您的小提琴链接，您会看到所有的文字都搞砸了我希望我说得通吗？【参考方案3】：

The timer can be tricky when the tab goes inactive.我移动了代码并清除了超时，以确保在开始新幻灯片时超时是干净的。

当从不同的标签切换回来时，我注意到一个问题（并非总是如此），即轮播实际上移动到下一张幻灯片的速度快于 5 秒，导致文本不完整。

https://jsfiddle.net/vLwm58Ln/

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

  var showText = function(target, message, index, interval) 
    if (index < message.length)       
      	$(target).append(message[index++]);
        timer = setTimeout(function() 
           showText(target, message, index, interval);
        , interval);
    
  , timer;
  
  //First time, this triggers right away instead of waiting for the slide to move
  showText(".active .demo-txt", $('#js-carousel').find(".active .mystring").html(), 0, 100);
  
  $('#js-carousel').on('slid.bs.carousel', function() 
    //clear any messed up timeout from prev slide
    clearTimeout(timer);
    //clear message that may be incomplete from the previous text animation
    $('.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-inner 
  position: relative;


.carousel-inner .overlay-effect 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);


.carousel-inner .caption 
  color: #ffffff;
  font-weight: bold;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100px;
  z-index: 9999;
  left: 5%;


.carousel-inner .caption h1,
.carousel-inner .caption h2 
  font-weight: bold;
  line-height: 1.6;


.carousel-inner .caption h1 
  font-size: 64px;


.carousel-inner .caption h2 
  font-size: 44px;


.carousel-inner .demo-txt 
  border-bottom: 4px solid #ec8422;
  padding-bottom: 5px;

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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" >
            <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" >
            <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" >
            <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" >
            <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>

【讨论】：

好友非常感谢您的帮助！！！实际上，上面的答案已经解决了我的答案，我正在用它进行测试！！1 如果我可以分享我的观点，我会分发所有答案.. :) +1 为您的答案

以上是关于Bootstrap轮播使文本逐个字母出现的主要内容，如果未能解决你的问题，请参考以下文章

视频播放时停止轮播 - Bootstrap 4

为啥我的 Bootstrap 3 轮播会出现这种行为？

滑块区域外的 Bootstrap 4 beta 轮播箭头

我可以在 react-bootstrap 中自定义轮播指示器吗

c语言编程:编写程序，实现文本文件的复制。从一个文件中逐个字符输出，将其中的小写字母转换成大写字母

如何使用 React-Bootstrap 根据项目计数创建带有拼接的轮播项目