Question

我正在使用slick slider，并尝试让打字机效果在幻灯片更改后运行。参见光滑的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();

});

在这里查看小提琴：https://jsfiddle.net/joshmoto/u8cjr4fy/

我有一些问题...

打字机功能不起作用，我不确定为什么吗？
我想在.slick-rick初始化时运行该函数，但是出现.on('init',事件，在init上不触发？
使用滑动事件来定位幻灯片是很好的选择，但是currentSlide返回了幻灯片的整数，我看不到有明显的方法使用它来定位当前的幻灯片，因为返回的整数没有匹配浮选data-slick-index

任何帮助都将非常感谢。

Answer 1

innerHTML是

Element属性innerHTML获取或设置元素中包含的HTML或XML标记。

您不能将其应用于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>

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

1 个答案: