使用BootStrap建立响应式网页——通栏轮播图（carousel）

1、bootstrap提供了js插件——轮播图

　　我们还是照旧，直接拿过来用，需要改的地方再说。

2、修改

　　小屏幕看小图，大屏图看大图：这个可以利用自定义属性（data-xxx）data-img-lg（保存大图）和data-img-xs（保存小图）属性保存图片的路径，利用jquery的data函数取出data-xxxx属性进行动态加载。

　　图片居中显示：大图用背景图片来做比较好一点，小图用img来做比较好一点（因为小图的话需要等比例缩放，用背景图做不到等比例缩放）。

　　承载轮播图的盒子高度：大图的的时候用图片的高度，小图自适应，所以要用到媒体查询，设置容器高度。

3、代码

<section id="banner" class="carousel slide" data-ride="carousel">
        <!--小圆点 -->
        <ol class="carousel-indicators">
          <li data-target="#banner" data-slide-to="0" class="active"></li>
          <li data-target="#banner" data-slide-to="1"></li>
          <li data-target="#banner" data-slide-to="2"></li>
          <li data-target="#banner" data-slide-to="3"></li>
        </ol>
        <!-- 轮播图片 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active" data-img-lg="img/slide_01_2000x410.jpg" data-img-xs="img/slide_01_640x340.jpg">
          </div>
          <div class="item" data-img-lg="img/slide_02_2000x410.jpg" data-img-xs="img/slide_02_640x340.jpg">
          </div>
          <div class="item" data-img-lg="img/slide_03_2000x410.jpg" data-img-xs="img/slide_03_640x340.jpg">
          </div>
          <div class="item" data-img-lg="img/slide_04_2000x410.jpg" data-img-xs="img/slide_04_640x340.jpg">
          </div>
        </div>
        <!-- 左右轮播 -->
        <a class="left carousel-control" href="#banner" 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="#banner" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">next</span>
        </a>
    </section>

<script type="text/javascript">
      $(function() {
        //获取屏幕宽度
//        var screenwidth=$(window).width();
        //判断是不是手机屏幕
//        if(screenwidth<768){//手机屏幕
//          $("#banner .carousel-inner .item").each(function(index,item){
//          var $item=$(item);//因为传递的item是dom对象，要把dom对象改为jquery对象
//          $item.css("background-image","url("+$item.data('img-xs')+")");
//          });
//        }else{//大屏幕
//          $("#banner .carousel-inner .item").each(function(index,item){
//          var $item=$(item);//因为传递的item是dom对象，要把dom对象改为jquery对象
//          $item.css("background-image",'url('+$item.data('img-lg')+')');
//          });
//        }
        //三元式
//        var isphone=screenwidth<768;
//        $("#banner .carousel-inner .item").each(function(index,item){
//          var $item = $(item);//因为传递的item是dom对象，要把dom对象改为jquery对象
//          $item.css("background-image","url("+$item.data(isphone?'img-xs':'img-lg')+")");
//        });
        function selectimg(){
          var screenwidth=$(window).width();
          var isphone=screenwidth<768;
          $("#banner .carousel-inner .item").each(function(index,item){
            var $item = $(item);//因为传递的item是dom对象，要把dom对象改为jquery对象
            $item.css("background-image",'url('+$item.data(isphone?'img-xs':'img-lg')+')');
            //我们需要小图的时候等比例变化，所以我们需要img标签
            if(isphone){
              $item.html("<img src='"+$item.data('img-xs')+"' alt='' />");
            }else {
              $item.empty();
            }
          });
        }
//        $(window).on("resize",selectimg);//这样是没有效果的，必须屏幕尺寸变化一下才会加载图片
        $(window).on('resize',selectimg).trigger('resize');//触发的是resize事件，不是事件处理程序selectimg
      });
    </script>

以上所述是小编给大家介绍的使用bootstrap建立响应式网页——通栏轮播图（carousel），希望对大家有所帮助