聊一聊 bootstrap 的轮播图插件

前端开发作者： 2024-08-19 19:55:01

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插件，如果你需要的轮播图。功能不需要太炫酷，那么bootstrap的插件是你的首要选择。使用方式引入js

使用方式

引入js和css

示例HTML代码


<div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">PrevIoUs</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

js初始化

一些方法事件

//轮播事件为200
$('#identifier').carousel({
    interval: 2000
})
//从左到右循环轮播

$('#identifier').carousel('cycle')
//停止轮播
$('#identifier').carousel('pause')
//轮播到某一帧

$('#identifier').carousel(0)
$('#identifier').carousel(1)
//轮播到上一个项目

$('#identifier').carousel('prev')
//轮播到下一个项目

$('#identifier').carousel('next')

回调函数

//滑动时出发的回调

$('#identifier').on('slide.bs.carousel',function () {
    // 执行一些动作...
 })
 
 //完成滑动过渡效果后，触发的事件
 
$('#identifier').on('slid.bs.carousel',function () {
    // 执行一些动作...
 })

自己使用例子

var car = $(".carousel");
car.carousel('pause');
$("#firstLi").bind("click",function() {
    car.carousel(0);
    car.carousel('pause');
});

$("#secondLi").bind("click",function() {
    car.carousel(1);
    car.carousel('pause');
});