您的位置：首页 > Web前端 > BootStrap

第二百四十八节，Bootstrap轮播插件

2017-05-05 16:26 309 查看
Bootstrap轮播插件

学习要点：

　　1.轮播插件

本节课我们主要学习一下 Bootstrap 中的轮播插件。

一．轮播

轮播插件就是将几张同等大小的大图，按照顺序依次播放。

基本实例。

第一步，给轮播器区域div设置一个id
给轮播器区域div设置样式carousel，slide
carousel样式class类，写在轮播器区域<div>里，设置轮播器区域样式(Bootstrap)
slide样式class类，写在轮播器区域<div>里，设置轮播器区域样式(Bootstrap)

第二步，设置图片区域
carousel-inner样式class类，写在轮播器图片区域<div>里，设置轮播器图片区域样式(Bootstrap)
item样式class类，写在轮播器图片<div>里，设置轮播器图片样式(Bootstrap)
active样式class类，写在轮播器图片<div>里，设置轮播器图片首选(Bootstrap)

第三步，设置小圆点按钮区域
carousel-indicators样式class类，写在小圆点按钮区域<div>里，设置小圆点按钮区域样式(Bootstrap)
将小圆点的li标签绑定轮播器区域div的id
data-target="#myCarousel"小圆点的li标签绑定轮播器区域div的id(Bootstrap)
data-slide-to="0"小圆点的li标签事件和编号默认从0开始(Bootstrap)
active样式class类，写在小圆点的<li>里，设置当前小圆点首选(Bootstrap)

第四步，设置向左向右箭头
将箭头的a标签连接href=轮播器区域div的id进行绑定
data-slide="prev"设置左箭头点击事件(Bootstrap)
data-slide="next"设置右箭头点击事件(Bootstrap)
left样式class类，写在箭头<a>里，设置箭头左样式(Bootstrap)
right样式class类，写在箭头<a>里，设置箭头右样式(Bootstrap)

第五步，设置自动轮播
data-ride="carousel"写在轮播器区域div里，设置轮播器自动轮播(Bootstrap)

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">                                                <!--3个小圆点区域-->
<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>
<div class="carousel-inner">                                                     <!--3张图片区域-->
<div class="item active">
<img src="img/553f1.jpg" alt="第一张">
</div>
<div class="item">
<img src="img/553f2.jpg" alt="第二张">
</div>
<div class="item">
<img src="img/553f3.jpg" alt="第三张">
</div>
</div>
<!--两个向左向右箭头-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>




轮播器属性

轮播插件有三个自定义属性：注意属性写在html里没什么作用，一般写在js里

carousel()轮播器方法，将轮播器执行轮播器方法(Bootstrap)

data-interval 默认值 5000，幻灯片的等待时间(毫秒)。如果为false，轮播将不会自动开始循环。
data-pause 默认鼠标停留在幻灯片区域(hover)即暂停轮播，鼠标离开即启动轮播。
data-wrap 默认值 true，轮播是否持续循环。

$(function () {
$('#myCarousel').carousel({
//设置自动播放/2 秒
interval: 1000,
//设置暂停按钮的事件
pause: 'hover',
//只播一次
wrap: false,
});
});


<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">                                                <!--3个小圆点区域-->
<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>
<div class="carousel-inner">                                                     <!--3张图片区域-->
<div class="item active">
<img src="img/553f1.jpg" alt="第一张">
</div>
<div class="item">
<img src="img/553f2.jpg" alt="第二张">
</div>
<div class="item">
<img src="img/553f3.jpg" alt="第三张">
</div>
</div>
<!--两个向左向右箭头-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>


轮播器方法

cycle 循环各帧(默认从左到右)
pause 停止轮播
number 轮播到指定的图片上(小标从 0 开始，类似数组)
prev 循环轮播到上一个项目
next 循环轮播到下一个项目

$(function () {
//点击按钮执行
$('button').on('click', function () {
//点击后，自动播放
$('#myCarousel').carousel('cycle');
//其他雷同
});
});


轮播器事件

slide.bs.carousel 当调用 slide 实例方式时立即触发该事件。
slid.bs.carousel 当轮播完成一个幻灯片触发该事件。

$(function () {
//事件
$('#myCarousel').on('slide.bs.carousel', function () {
alert('当调用 slide 实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('当轮播完成一个幻灯片触发');
});
});




给轮播图设置文字

carousel-caption样式class类，写在轮播图区域里<div>里，设置轮播图文字区域(Bootstrap)

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">                                                <!--3个小圆点区域-->
<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>
<div class="carousel-inner">                                                     <!--3张图片区域-->
<div class="item active">
<img src="img/553f1.jpg" alt="第一张">
<div class="carousel-caption">
<h3>广告录音</h3>
<p>专业的广告录音设备，完善的录音流程</p>
</div>
</div>
<div class="item">
<img src="img/553f2.jpg" alt="第二张">
<div class="carousel-caption">
<h3>广告录音</h3>
<p>专业的广告录音设备，完善的录音流程</p>
</div>
</div>
<div class="item">
<img src="img/553f3.jpg" alt="第三张">
<div class="carousel-caption">
<h3>广告录音</h3>
<p>专业的广告录音设备，完善的录音流程</p>
</div>
</div>
</div>
<!--两个向左向右箭头-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航