Question

我正试图在每次幻灯片更改时（包括初始化）在我的轮播中滑动标题。实际上它除了悬停时效果很好。我想清除我的超时但不影响..

<script type='text/javascript'>
$(document).ready(function () {

    var carouselContainer = $('.carousel');
    var slideInterval = 3000;
    var carouselTimeout;

    carouselContainer
      .on('slid', function(){
        var caption = $(this).find('.active').find('.carousel-caption');

        caption.slideToggle();

        var carouselTimeout = setTimeout(function(){
          carouselTimeout = false;
          caption.slideToggle();
        }, slideInterval);

      })
      .on('slide', function(){
        if(carouselTimeout){
          clearTimeout(carouselTimeout);
          carouselTimeout = false;
        }
      });

    carouselContainer.carousel({
        interval: slideInterval,
        cycle: true,
        pause: "hover"
      }).trigger('slid');

    carouselContainer.hover(function(){
      clearTimeout(carouselTimeout);
      carouselTimeout = false;
    });

});
</script>

有什么建议吗？

Answer 1

我相信你会因超时而过度复杂，你可以简单地使用slid ans slide的事件来切换你的标题：

var carouselContainer = $('.carousel');
var slideInterval = 3000;

function toggleCaption(){
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.slideToggle();
}

carouselContainer.carousel({
    interval: slideInterval,
    cycle: true,
    pause: "hover"
}).on('slid slide', toggleCaption).trigger('slid');

<强> Demo fiddle

Bootstrap Carousel Caption动画

1 个答案: