javascript - 推特 Bootstrap3 : get current carousel index number via clicking and automatic

Question

在 bootstrap3 最新版本中，轮播中有 4 个项目:

   <!-- Carousel nav -->
            <a class="carousel-control left" href="#carousel" data-slide="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="carousel-control right" href="#carousel" data-slide="next"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>

在右轮播控件中，我获取当前数字索引并用它做一些事情。

$(".right").click(function(){
    idx = $('.carousel-inner div.active').index()+1;
    if(idx == 4)  idx = 0;
    animateBorder(idx);
});

也适用于左侧:

$(".left").click(function(){
    idx = $('.carousel-inner div.active').index()-1;
    if(idx == -1)  idx = 3;
    animateBorder(idx);
});

效果很好。

所以我想使用 animateBorder() 函数来自动更改幻灯片。

我用这个:

$('#carousel').on('slide.bs.carousel', function() {
    idx = $('.carousel-inner div.active').index() + 1;
    if(idx == 4)  idx = 0;
    animateBorder(idx);

});

效果很好。

但是当我单击左侧按钮时，第二个和第三个代码中的 animateBorder() 都会运行。

如何控制它？

Answer 1

您必须删除右键单击和左键单击事件中的 animateborder 函数。在 fiddle 控制台中检查一下。右键或左键单击事件中没有 console.log("animateborderf") ，但是当您单击它们时它会触发。 https://jsfiddle.net/h73yp2o3/

$(".right").click(function(){
    idx = $('.carousel-inner div.active').index()+1;
    if(idx == 4)  idx = 0;
});
$(".left").click(function(){
    idx = $('.carousel-inner div.active').index()+1;
    if(idx == 4)  idx = 0;
});
$('#myCarousel').on('slide.bs.carousel', function() {
    idx = $('.carousel-inner div.active').index() + 1;
    if(idx == 4)  idx = 0;
    console.log("animateborderf");

});

情况是，当用户单击右键或左键时，轮播会滑动，并且当轮播滑动时，将触发 Slide.bs.carousel 事件。因此 animateborder 函数在您的代码中调用了两次。

编辑: https://jsfiddle.net/h73yp2o3/2/我想这更好。