我正在使用引导旋转木马的滑块,每个幻灯片上都有一些文字.
我几乎解决了
但有两个问题
>在第一张幻灯片上,文字不会出现
>如果用户访问浏览器上的其他选项卡意味着如果当前窗口不在焦点,那么一切都会变得混乱.
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" alt="Chania">
<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" alt="Chania">
<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" alt="Flower">
<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" alt="Flower">
<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,interval); },interval);
}
}
var str = $(this).find(".active .mystring").html();
$('.active .demo-txt').html("");
showText(".active .demo-txt",str,100);
});
});
解决方法
而不是settimeout使用setInterval函数.当新的幻灯片开始时,也可以使用clearInterval来清除schedular. (我认为这是你的第二个问题.)
这是您的目标js文件：
$(document).ready(function() {
$('#js-carousel').carousel({
interval: 5000
});
var handler;
var interval = 5000;
var index = 0;
function showText(target,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",index++,100);
handler = setInterval(function(){
showText(".active .demo-txt",100);
},100);
}
//on each carousel slide change:
$('#js-carousel').on('slid.bs.carousel',iteration);
//start immediately for your first problem:
iteration.bind($('#js-carousel'))();
});
