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'); //让窗口打开的时候就执行一次

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

谢谢观看~么么哒