Bootstrap 轮播（Carousel）插件

// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});

结果如下所示：

事件

下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件	描述	实例
slide.bs.carousel	当调用 slide 实例方法时立即触发该事件。	$('#identifier').on('slide.bs.carousel', function () {     // 执行一些动作... })
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件。	$('#identifier').on('slid.bs.carousel', function () {     // 执行一些动作... })

实例

下面的实例演示了事件的用法：

实例

 
    
    
                                                            
    
        
            
            Previous
        
        
            
            Next
        

$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("当调用 slide 实例方法时立即触发该事件。");
});
});

结果如下所示：