在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 carouse control
中我获得了当前的数字索引并对其做了一些事情。
$(".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()都会运行。
我该如何控制它?
答案 0 :(得分:0)
您必须删除右键和左键单击事件中的animateborder功能。 在小提琴控制台中查看它。在右键或左键单击事件中没有console.log(&#34; animateborderf&#34;)但是,当您单击它们时它会触发。 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");
});
情况是当用户点击向右或向左按钮,轮播幻灯片以及当轮播幻灯片滑动时.bs.carousel事件正在触发。所以animateborder函数会在你的代码中调用两次。
编辑: https://jsfiddle.net/h73yp2o3/2/我想这更好。