小编med*_*ris的帖子

我想为旋转木马的每张幻灯片设置数据间隔.在stackoverflow上,我找到了一个针对这种情况的JavaScript代码段,但它不能正常工作.(Twitter Bootstrap Carousel幻灯片持续时间)每张幻灯片的数据间隔都以html格式设置,五张幻灯片上的ms为3000到7000.

幻灯片的实际持续时间不符合我的期望和代码.示例:我将间隔设置为3000,幻灯片显示大约7-8秒.

js文件写在站点的页脚区域中.

这是js代码:

var t;
var start = $('#carouselExampleFade').find('.active').attr('data-interval');
t = setTimeout("$('#carouselExampleFade').carousel({interval: 1000});", start - 1000);

$('#carouselExampleFade').on('slid.bs.carousel', function() {
    clearTimeout(t);
    var duration = $(this).find('.active').attr('data-interval');

    $('#carouselExampleFade').carousel('pause');
    t = setTimeout("$('#carouselExampleFade').carousel();", duration - 1000);
})

$('.carousel-control-next').on('click', function() {
    clearTimeout(t);
});

$('.carousel-control-prev').on('click', function() {
    clearTimeout(t);
});

旋转木马的一部分:

<div class="row">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-interval="2000">
                <div class="carousel-caption d-none d-md-block text-left">
                    <h3>Willkommen im <br>Parkett!</h3>
                </div>
                <img class="d-block w-100" src="assets/img/animation/slide1.jpg" alt="First slide">
            </div>

注意:我已更改了carousel-control-next和-prev行.(之前是 - …