Js(一)—— Bootstrap轮播

caroly 2020年08月05日 68次浏览

『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>
.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");
});