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

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">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</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">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</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">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div>