bootstrap轮播

Bootstrap轮播

自动轮播是最基本的功能。通过『Bootstrap』可以很方便的做出我们想要的轮播样式。『Bootstrap』轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。

轮播实例

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <a class="listbox-index-img1" href="#"><img src=""></a>
        </div>
        <div class="item">
            <a class="listbox-index-img2" href="#"><img src=""></a>
        </div>
        <div class="item">
            <a class="listbox-index-img3" href="#"><img src=""></a>
        </div>
    </div>

    <a class="left carousel-control btn_prev" href="#carousel-example-generic" role="button" data-slide="prev">
        <img class="glyphicon glyphicon-chevron-left prev-left" src="" alt="" />
    </a>
    <a class="right carousel-control btn_prev" href="#carousel-example-generic" role="button" data-slide="next">
        <img class="glyphicon glyphicon-chevron-right next-right" src="" alt="" />
    </a>
</div>

• carousel: 创建一个轮播。
• carousel-indicators: 为轮播添加一个指示符，就是轮播图底的小点，轮播的过程中可以显示目前是第几张图。
• carousel-inner: 添加要切换的图片。
• item： 指定每个图片的内容。
• slide: 切换图片的过渡和动画效果，如果不需要，可以删除。
• carousel-control: 设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式。

自动轮播

自动轮播需要在『class 』为『carousel』的『div』中添加元素：data-ride="carousel" 。

设置自动轮播间隔需要在同一位置添加元素：data-interval="5000" 。（设为 5 s）

手动轮播

手动轮播除了左右箭头外，还可以支持鼠标滑动，放在移动端就是手指滑动播放下一张。

去掉自动轮播的样式：data-ride="carousel"和data-interval="5000" 。

引入hammer.min.js以及jquery.hammer.js 。

添加以下『js』：

$('#carousel-example-generic').hammer().on('swipeleft', function(){
    $(this).carousel('next');
});
$('#carousel-example-generic').hammer().on('swiperight', function(){
    $(this).carousel('prev');
});

底部数字圆圈样式

重写底部圆点样式如下：

<ol class="carousel-indicators1">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active indica-ol-li">1</li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class="indica-ol-li">2</li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class="indica-ol-li">3</li>
    <li data-target="#carousel-example-generic" data-slide-to="3" class="indica-ol-li">4</li>
</ol>

```css
.carousel-indicators1 {
    position: relative;
    z-index: 15;
    width: 70%;
    float: right;
    padding-right: 10%;
    text-align: right;
    list-style: none;
}

.carousel-indicators1 li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 100;
    color: #999999;
    text-align: center;
    border: 1px solid rgb(153, 130, 130);
}

.carousel-indicators1 .active {
    background-color: #999999;
    color: #ffffff;
}

点击圆点跳到对应图

首先要改变数字圆圈的背景色，当点击数字圆圈的时候，该数字圆圈要有相应的样式响应：

$(".indica-ol-li").click(function(){
    for(var i= 0; i< 4; i++){
        $(".carousel-indicators1 li").removeClass("active");
        $(this).addClass("active");
    }
});

点击的时候同时要跳到对应图片，需要在『li』中指定『data-target』为『carousel』的『id』。

滑动图对应圆点响应

当滑动图片的时候，数字圆圈也要有相应的样式响应：

$("#carousel-example-generic").on('slide.bs.carousel', function (event) {
    var $hoder = $('#carousel-example-generic').find('.item'),
        $items = $(event.relatedTarget);
    //getIndex就是轮播到当前位置的索引
    var getIndex= $hoder.index($items);
    $(".carousel-indicators1 li").removeClass("active");
    $(".carousel-indicators1").find("li").eq(getIndex).addClass("active");
});