使用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>