幻灯片更改后光滑的轮播运行打字机功能

Question

我正在使用 slick slider and am trying to get a typewriter effect to run after the slide changes. See slick documentation。

我使用的打字机函数源来自w3schools.

<div class="slick-rick">
  <div class="phrase" data-phrase="Wubba lubba dub dub!">1</div>
  <div class="phrase" data-phrase="Eek barba durkle">2</div>
  <div class="phrase" data-phrase="And that's the wayyyyyy the news goes!">3</div>
  <div class="phrase" data-phrase="Uh ohhhh! Somersoult jump!">4</div>
  <div class="phrase" data-phrase="Hit the sack, Jack!">5</div>
  <div class="phrase" data-phrase="GRASSSSS... tastes bad!">4</div>
</div>

我的脚本...

$('.slick-rick').slick({
  arrows: false

}).on('afterChange', function(event, slick, currentSlide, nextSlide) {

  // empty's html from all slides
  $('.slick-slide .phrase', this).empty();

  // counter
  var i = 0;

  // the text pulled from slide data attribute
  var txt = $('.slick-current .phrase', this).data('phrase');

  // typing speed
  var speed = 50;

  console.log(txt);

    // the function to type the data phrase out
  function typeWriter() {

    if (i < txt.length) {
      $('.slick-current .phrase', this).innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  }

  // run the function
  typeWriter();

});

请参阅此处 fiddle：https://jsfiddle.net/joshmoto/u8cjr4fy/

我有一些问题...

打字机功能不起作用，我不确定为什么？
我想运行 .slick-rick 初始化的功能，但是 slicks .on('init', 事件，不会在 init?
使用 slick 事件定位幻灯片会很好，但是 currentSlide returns 幻灯片整数，我看不到使用它定位当前幻灯片的明显方法，因为返回的整数与浮油不匹配 data-slick-index

任何帮助都将非常感谢。

Answer 1

innerHTML 是

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

您不能将其应用于 jQuery 对象：

$('.slick-current .phrase', this).innerHTML += txt.charAt(i);

使用 .html(function) 将该行更改为：

$('.slick-current .phrase').html(function(idx, html) {
    return html + txt.charAt(i)
});

$('.slick-rick').slick({
    arrows: false

}).on('afterChange', function(event, slick, currentSlide, nextSlide) {

    // empty's html from all slides
    $('.slick-slide .phrase', this).empty();

    // counter
    var i = 0;

    // the text pulled from slide data attribute
    var txt = $('.slick-current .phrase', this).data('phrase');

    // typing speed
    var speed = 50;

    console.log(txt);

    // the function to type the data phase out
    function typeWriter() {

        if (i < txt.length) {
            $('.slick-current .phrase').html(function(idx, html) {
                return html + txt.charAt(i)
            });
            i++;
            setTimeout(typeWriter, speed);
        }
    }

    // run the function
    typeWriter();

});

.slick-rick .phrase {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    color: black;
    background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slick-rick">
    <div class="phrase" data-phrase="Wubba lubba dub dub!">1</div>
    <div class="phrase" data-phrase="Rikitikitavi, bitch!">2</div>
    <div class="phrase" data-phrase="And that's the wayyyyyy the news goes!">3</div>
    <div class="phrase" data-phrase="Uh ohhhh! Somersoult jump!">4</div>
    <div class="phrase" data-phrase="Hit the sack, Jack!">5</div>
    <div class="phrase" data-phrase="GRASSSSS... tastes bad!">4</div>
</div>

幻灯片更改后光滑的轮播运行打字机功能

Slick carousel after slide change run typewriter function

jquery

slick.js

幻灯片更改后光滑的轮播 运行 打字机功能

Slick carousel after slide change run typewriter function

jquery

slick.js

幻灯片更改后光滑的轮播运行打字机功能