自適應屏幕輪播圖詳解

相應的工具:

• bootstrap
• jQuery

材料：

• 4張640x340的圖片
• 4張2000x410內容相同的圖片

原理及實現方法:

1. 當屏幕寬度大於等於768px時，圖片使用大圖，輪播圖里的div高度固定，寬度為窗口的寬度(隨窗口寬度的變化而變化)
2. 當屏幕寬度小於768px（手機）時，將圖片換為小圖，並在div里生成img標簽，img的寬高隨窗口變化而變化，包裹img的div也隨之變化
3. html代碼
   

    <section id="main_ad" class="carousel slide" data-ride="carousel">
       <!-- 活動指示器 -->
       <ol class="carousel-indicators">
         <li data-target="#main_ad" data-slide-to="0" class="active"></li>
         <li data-target="#main_ad" data-slide-to="1"></li>
         <li data-target="#main_ad" data-slide-to="2"></li>
         <li data-target="#main_ad" data-slide-to="3"></li>
       </ol>
       <!-- 輪播項 -->
       <div class="carousel-inner" role="listbox">
         <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
         <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
         <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
         <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
       </div>
       <!-- 控制按鈕 -->
       <a class="left carousel-control" href="#main_ad" 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="#main_ad" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       </a>
     </section>

4. css代碼

   #main_ad .carousel-inner .item{
       background-size: cover; /*讓圖片覆蓋滿整個div*/
       background-position: center,center; /*讓圖片在div里水平垂直居中*/
       background-repeat: no-repeat;
       height: 410px;
   }
   @media (max-width:768px) {
       #main_ad .carousel-inner .item {
           height: auto;
       }
       #main_ad .carousel-inner .item img{
           width: 100%;
       }
   }

    

5. js代碼

   $(function() {
     /**
      * 根據屏幕寬度的變化決定輪播圖片應該展示什么 5    */
     function resize() {
       // 獲取屏幕寬度
       var windowWidth = $(window).width();
       // 判斷屏幕屬於大還是小
       var isSmallScreen = windowWidth < 768;
       // 根據大小為界面上的每一張輪播圖設置背景
       $('#main_ad > .carousel-inner > .item').each(function(i, item) {
         var $item = $(item);
         // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
         var imgSrc =
           isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
         // 設置背景圖片
         $item.css('backgroundImage', 'url("' + imgSrc + '")');
         //
         // 因為我們需要小圖時 尺寸等比例變化，所以小圖時我們使用img方式
         if (isSmallScreen) {
           $item.html('<img src="' + imgSrc + '" alt="" />');
         } else {
           $item.empty();
         }
       });
     }
     // // 讓window對象立即觸發一下resize，初始化div的背景圖
     // $(window).trigger('resize');
   
   
     $(window).on('resize', resize).trigger('resize');
   });

    

在移動端手指觸摸輪播圖切換效果:

 

 var carousels = $(".carousel");  //獲取所有的輪播圖
    var startX,endX,finalMove;
    var diviation = 60;  //讓手指滑動一定距離輪播圖才工作
    carousels.on("touchstart",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        startX = event.originalEvent.touches[0].pageX;//獲取手指接觸屏幕時的位置
    });
    carousels.on("touchmove",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        endX = event.originalEvent.touches[0].pageX;//手指滑動時該值一直刷新，當手指離開時保留最后一次手指的位置
    })
    carousels.on("touchend",function(event) {
        //console.log(event.originalEvent.touches[0].pageX);
        finalMove = Math.abs(startX - endX) - diviation;
        if(finalMove > 0 && (startX - endX) > 0) {//如果手指滑動方向向左，輪播圖向右播放一張圖片
            $(this).carousel('next);
        }
        else if (finalMove > 0 && (startX - endX) < 0) {
            $(this).carousel('prev');
        }
    })

 

 

 

一些補充：

　　1. 為什么不一開始就用img標簽？

　　　 因為要讓圖片水平垂直居中，這樣更方便

　　2.bootstrap文檔地址：v3.bootcss.com

　　3.@media 可以針對不同的屏幕尺寸設置不同的樣式

　　4.超小屏幕 手機 (<768px) 小屏幕 平板 (≥768px)中等屏幕 桌 面顯示器 (≥992px)大屏幕  大桌面顯示器 (≥1200px)