Bootstrap 轮播图技巧

bootstrap的使用让页面开发的速度变得更快,在这里就着重解析一下bootstrap3里轮播图模块,和不同情况（屏幕宽度）下轮播图图片大小如何做到响应式切换.

下面代码即是bootstrap3轮播图模块解析:

<section id="banner">
    <!-- 当同一个页面中,同时存在多个轮播图时,不同的轮播图以及他的控制按钮,需要有相对应id值 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 控制翻页的圆点 -->
        <ol class="carousel-indicators">
            <!-- data-target 指向被控制的轮播图 -->
            <!-- data-slide-to 表示点击这个点时,需要跳转到第几页 -->
            <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>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <!-- 轮播图内部显示的内容 -->
        <div class="carousel-inner" role="listbox">
            <!-- 一个item表示一页 -->
            <!-- active表示当前正在显示的一页 -->
            <div class="item active" >
                <!--<img src="./img/slide_01_2000x410.jpg" alt="...">-->
                <!-- carousel-caption 轮播图中的字幕 -->
                <!-- 显示在轮播图中心偏下的位置 -->
                <!--<div class="carousel-caption">-->
                    <!--ABCDEFG-->
                <!--</div>-->
            </div>
            <div class="item" >
            </div>
            <div class="item" >
            </div>
            <div class="item" >
            </div>
        </div>
        <!-- Controls 左右的翻页箭头 -->
        <!-- 翻页控制中,href属性指向所控制的轮播图 -->
        <!-- data-slide 表示翻页的方向 -->
        <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

轮播图的图片需要添加到<div class="item">中去

那么添加图片的方式有几种呢?

这里提供几种可行的图片添加方式:

方法1:最简单的办法

div中添加 <img> 标签来实现

            <div class="item">
                <img src="./img/slide_02_2000x410.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>

缺点:

这种方法需要设置较为复杂的CSS样式来让图片超过屏幕宽度时让图片居中显示并overflow:hidden

方法2:设置div的背景来实现

css代码:

            background: url('图片.jpg') center center no-repeat;

并设置background-size:cover 根据短的边填满图片

优点是设置比较简单,缺点也很明显,需要给每一个div添加图片地址,后续修改也比较麻烦.

图片是获取的内容,在网页设计中也不应该由css来获取,应该通过逻辑来获取图片的地址

方法3：当你的图片名有严格的名称如 

slide_00_2000x410.jpg

slide_01_2000x410.jpg

slide_02_2000x410.jpg

slide_03_2000x410.jpg

slide_00_640x360.jpg

slide_01_640x360.jpg

slide_02_640x360.jpg

slide_03_640x360.jpg

这种条件下可以通过JS拼接 <div class= "item">的 background-image地址来实现

JS代码如下:

$(function () {
    var itemArr = $(' .item');
    console.log(itemArr);
//    根据不同的item，设置不同的图片
    itemArr.each(function (index,item) {
        //通过index，来构建图片的url
        var imgURL = './img/slide_0'+index +'_2000x410.jpg';
        //设置背景图片的URL地址
        item.style.backgroundImage = "url('" + imgURL +"')";
    })
});

但是方法3 的局限性太大了,随便点开一个门户网站查看它的轮播图图片地址都时一堆"乱码"

方法4:使用来data-image 来巧妙的获取来图片的路径,从而避开了对图片地址的依赖

首先需要设置div:

            <div class="item" data-image="./img/slide_02_2000x410.jpg">
                <!--<img src="./img/slide_02_2000x410.jpg" alt="...">-->
                <div class="carousel-caption">
                </div>
            </div>

JS代码:

$(function () {
    //轮播图片的设置
    var itemArr = $('.item');
    itemArr.each(function (index, item) {
        //获取data-image里面的数据
        var imageURL = item.dataset.image;
        item.style.backgroundImage = "url('" + imageURL +"')";
    });
});

这样就可以方便的通过修改data-image的值来更换页面,整体的代码也更加干练.

--------------------------------------------------------------------------------------------------------------------

响应式页面的轮播图的图片也应该是响应式的,大屏幕轮播图用大图,小平面轮播图用小图,下面的代码可以通过方法4实现轮播图的响应式

div设置:

            <div class="item" data-large-image="./img/slide_03_2000x410.jpg" data-small-image="./img/slide_03_640x340.jpg">
                <!--<img src="./img/slide_03_2000x410.jpg" alt="...">-->
                <div class="carousel-caption">
                </div>
            </div>

JS代码:

//当屏幕大小发生变化是时,根据宽度来改变图片的大小
//窗口宽度大小便是时触发的事件
$(window).on('resize',function () {
    //获取当前屏幕额的宽度
    var screenWidth = $(window).width();
    console.log(screenWidth);
    var itemArr = $('#banner > .carousel > .carousel-inner> .item');
    itemArr.each(function (index, item) {
        //获取data-image里面的数据
        var largeImageURL = item.dataset.largeImage;
        var smallImageURL = item.dataset.smallImage;
        //当屏幕大小小于768时用640*360大小的图片
        if(screenWidth<768){
            item.style.backgroundImage = "url('" + smallImageURL +"')";
            //根据屏幕宽度调整图片高度
            var imageHeight = screenWidth /640 *360;
            item.style.height =imageHeight +"px";
        }else {
            item.style.backgroundImage = "url('" + largeImageURL +"')";
            item.style.height='410px';
        }

    });

}).trigger('resize'); //让窗口打开的时候就执行一次

这样设置之后轮播图的大小就会根据页面宽度来响应啦.

谢谢观看~么么哒