快捷導(dǎo)航

使用BootStrap建立響應(yīng)式網(wǎng)頁——通欄輪播圖（carousel）

更新時間：2016年12月21日 13:43:05 作者：蘇羽壟

這篇文章主要介紹了使用BootStrap建立響應(yīng)式網(wǎng)頁通欄輪播圖（carousel）的相關(guān)資料,需要的朋友可以參考下

1、bootstrap提供了js插件——輪播圖

　　我們還是照舊，直接拿過來用，需要改的地方再說。

2、修改

　　小屏幕看小圖，大屏圖看大圖：這個可以利用自定義屬性（data-XXX）data-img-lg（保存大圖）和data-img-xs（保存小圖）屬性保存圖片的路徑，利用jQuery的data函數(shù)取出data-xxxx屬性進行動態(tài)加載。

　　圖片居中顯示：大圖用背景圖片來做比較好一點，小圖用img來做比較好一點（因為小圖的話需要等比例縮放，用背景圖做不到等比例縮放）。

　　承載輪播圖的盒子高度：大圖的的時候用圖片的高度，小圖自適應(yīng)，所以要用到媒體查詢，設(shè)置容器高度。

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');//觸發(fā)的是resize事件，不是事件處理程序selectImg
      });
    </script>

以上所述是小編給大家介紹的使用BootStrap建立響應(yīng)式網(wǎng)頁——通欄輪播圖（carousel），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: