第124天：移動web端-Bootstrap輪播圖插件使用

Bootstrap JS插件使用

> 對於Bootstrap的JS插件，我們只需要將文檔實例中的代碼粘到我們自己的代碼中
> 然后作出相應的樣式調整

Bootstrap中輪播圖插件叫作Carousel

一、基本的輪播圖實現

HTML代碼

<!-- 
  以下容器就是整個輪播圖組件的整體，
  注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖
  bootstrap.js會自動為當前元素添加圖片輪播的特效
-->
<div id="輪播圖的ID" class="carousel slide" data-ride="carousel">
  <!-- ol標簽是圖片輪播的控制點 -->
  <ol class="carousel-indicators">
    <!-- 
      每一個li就是一個單獨的控制點
        data-target屬性就是指定當前控制點控制的是哪一個輪播圖，其目的是如果界面上有多個輪播圖，便於區分到底控制哪一個
        data-slide-to屬性是指當前的li元素綁定的是第幾個輪播項
      注意，默認必須給其中某個li加上active，展示的時候就是焦點項目
    -->
    <li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li>
    <li data-target="#輪播圖的ID" data-slide-to="1"></li>
    <!-- ...更多的 -->
  </ol>
  <!-- 
    .carousel-inner是所有輪播項的容器盒子，
    注意role="listbox"代表當前div是一個列表盒子，作用就是給當前div添加一個語義
  -->
  <div class="carousel-inner" role="listbox">
    <!-- 每一個.item就是單個輪播項目，注意默認要給第一個輪播項目加上active，表示為焦點 -->
    <div class="item active">
      <!-- 輪播項目中展示的圖片 -->
      <img src="example.jpg" alt="示例圖片">
      <div class="carousel-caption">
        <!-- 標題或說明性文字，如果不需要，直接刪除當前div.carousel-caption -->
      </div>
    </div>
    <div class="item">
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>
  <!-- 圖片輪播上左右兩個控制按鈕，分別點擊可以滾動到上一張和下一張 -->
  <!-- 此處需要注意的是 該a鏈接的href屬性必須指向需要控制的輪播圖ID -->
  <!-- 另外a鏈接中的data-slide="prev"代表點擊該鏈接會滾到上一張，如果設置為next的話則相反 -->
  <a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">上一張</span>
  </a>
  <a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">下一張</span>
  </a>
</div>

二、輪播圖使用中的問題

1、由於輪播圖片超寬造成的影響

　　- 美工為了在不同屏幕下更好地展示將圖片兩邊做的非常寬，但是我們大多數情況的頁面寬度都無法滿足這樣的圖片寬度
　　- 而且Bootstrap的樣式中默認將圖片的max-width設置為100%；
　　- 造成界面圖片縮放
　　- 想在一個較小屏幕下展示一個超寬的圖片，並讓圖片居中顯示
　　+ 兩種辦法：
　　（1） 換用背景圖的方式，background-position: center center;
　　（2）使img元素絕對定位，left:50%，margin-left: -width/2

2、background使用

　　- 將容器的高度固定（410px）
　　- 將輪播圖改為背景顯示
　　- 由於可能圖片的高度不一定是410px
　　- 所以需要設置css3中的background-size

3、background-size

　　（1）length
　　+ 如 background-size: 100px 100px，將背景圖固定到多大尺寸
　　- percentage
　　+ 如 background-size: 90% 90%，以百分比的形式設置背景大小
　　（2）cover
　　　　+ 1.背景圖片等比例縮放
　　　　+ 2.讓背景圖相對較小邊放大到目標容器大小結束
　　　　* 如：一張100\*200的背景圖放到一個300\*400的盒子中，最終背景圖片的大小是300\*600
　　　　* 因為背景圖的較小邊為100，將100放大到目標容器300的寬度，放大了3倍，最終結果300\*600
　　（3） contain
　　　　+ 1.背景圖片等比例縮放
　　　　+ 2.讓背景圖相對較大邊放大到目標容器大小結束
　　　　* 如：一張100\*200的背景圖放到一個300\*400的盒子中，最終背景圖片的大小是200\*400
　　　　* 因為背景圖的較大邊為200，將200放大到目標容器400的高度，放大了2倍，最終結果200\*400

4、圖片響應式

　　（1）目的
　　+ 各種終端都需要正常顯示圖片
　　+ 移動端應該使用更小（體積）的圖片
　　（2）實現方式
　　　　+ 將元素中直接設置的圖片背景刪除，換成兩個data-屬性（如：data-img-sm="小圖路徑"，data-img-lg="大圖路徑"）
　　　　+ 通過JS的方式獲取屏幕的寬度；
　　　　+ 判斷屏幕寬度是否小於一定的值（如：768）
　　　　+ 根據判斷情況決定使用具體的大圖還是小圖

三、javascript

1、根據屏幕大小設置輪播圖片

var windowWidth = $(window).width();  // 獲取屏幕寬度
var isSmallScreen = windowWidth < 768;  // 判斷屏幕屬於大還是小
// 根據大小為界面上的每一張輪播圖設置背景
// $('#main_ad > .carousel-inner > .item') // 獲取到的是一個DOM數組（多個元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
var $item = $(item);// 因為拿到是DOM對象 需要轉換
// 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 + '")');
});

2、window resize事件

由於上一步我們實現的過程是指在頁面加載完成判斷一次，
- 當用戶手動調整頁面寬度過后沒有及時發生變化，
- 所以我們可以通過window的resize事件中重新完成以上操作來解決這個問題

function 窗口變化后執行的函數名(){
  // 具體的操作
}
$(window).on('resize', 窗口變化后執行的函數名);
```

- 這個事件只會在窗口尺寸發生變化后執行，但是我們需要一開始時執行一次

trigger函數是讓window對象立即出發一次

$(window).on('resize', 窗口變化后執行的函數名).trigger('resize');

3、小圖片不需要使用背景的方式

　　- 小圖如果還是使用背景的方式，當屏幕特別小時，效果很差
　　- 所以當使用小圖時，改用img的方式

// 因為我們需要小圖時 尺寸等比例變化，所以小圖時我們使用img方式
if (isSmallScreen) {
  $item.html('<img src="' + imgSrc + '" alt="" />');
} else {
  $item.empty();
}

　　按照目前的情況，如果是小圖展示則不需要給容器加上410px的固定高度
　　- 所以我們可以通過CSS媒體查詢的方式解決

#main_ad > .carousel-inner > .item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (min-width: 768px) {
  #main_ad > .carousel-inner > .item {
    height: 410px;
  }
}
#main_ad > .carousel-inner > .item > img {
  width: 100%;
}

四、柵格系統

網格系統

- 該板塊當屏幕為中等尺寸時分為3列，較小屏幕是分為2列
- 所以使用網格系統划分

<div class="col-sm-6 col-md-4">
  <!-- ... -->
</div>

五、媒體對象樣式

- 每一個小塊的樣式可以通過Bootstrap中的媒體對象樣式實現

<a href="#">
  <div class="media">
    <div class="media-left">
      <i class="icon-uniE907"></i>
    </div>
    <div class="media-body">
      <h4 class="media-heading">支付交易保障</h4>
      <p>銀聯支付全稱保證支付安全</p>
    </div>
  </div>
</a>

六、響應式輔助類型

- 整個板塊在超小屏幕下是隱藏起來的
+ 只需要給當前板塊加上hidden-xs的class