幻灯片更换后光滑的旋转木马运行打字机功能

Question

>我正在使用光滑的滑块，并试图在幻灯片更改后运行打字机效果。请参阅光滑的文档。

我使用的打字机功能源来自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/

---

我有几个问题...

1. 打字机功能不起作用，我不知道为什么？
2. 我想在.slick-rick初始化时运行该函数，但是.on('init',事件很光滑，不会在init上触发？
3. 使用光滑事件来定位幻灯片会很好，但是currentSlide返回幻灯片交互器，我看不到使用它来定位当前幻灯片的明显方法，因为返回的交互器与光滑不匹配data-slick-index

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

Answer 1

innerHTML 是

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

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

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

使用 .html(函数( 将该行更改为：

$('.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>