代码之家 › 专栏 › 技术社区 › joshmoto

滑片更换后滑动转盘运行打字机功能

slick.js jquery

joshmoto · 技术社区 · 8 年前

我在用 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

任何帮助都会很棒的谢谢。

1 回复 | 直到 8 年前

gaetanoM 8 年前

innerHTML 是

元素属性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>