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

Bootstrap JS插件使用

> 對于Bootstrap的JS插件，我們隻需要将文檔執行個體中的代碼粘到我們自己的代碼中

> 然後作出相應的樣式調整

Bootstrap中輪播圖插件叫作Carousel

一、基本的輪播圖實作

HTML代碼

1 <!-- 
 2   以下容器就是整個輪播圖元件的整體，
 3   注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示目前是一個輪播圖
 4   bootstrap.js會自動為目前元素添加圖檔輪播的特效
 5 -->
 6 <div id="輪播圖的ID" class="carousel slide" data-ride="carousel">
 7   <!-- ol标簽是圖檔輪播的控制點 -->
 8   <ol class="carousel-indicators">
 9     <!-- 
10       每一個li就是一個單獨的控制點
11         data-target屬性就是指定目前控制點控制的是哪一個輪播圖，其目的是如果界面上有多個輪播圖，便于區分到底控制哪一個
12         data-slide-to屬性是指目前的li元素綁定的是第幾個輪播項
13       注意，預設必須給其中某個li加上active，展示的時候就是焦點項目
14     -->
15     <li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li>
16     <li data-target="#輪播圖的ID" data-slide-to="1"></li>
17     <!-- ...更多的 -->
18   </ol>
19   <!-- 
20     .carousel-inner是所有輪播項的容器盒子，
21     注意role="listbox"代表目前div是一個清單盒子，作用就是給目前div添加一個語義
22   -->
23   <div class="carousel-inner" role="listbox">
24     <!-- 每一個.item就是單個輪播項目，注意預設要給第一個輪播項目加上active，表示為焦點 -->
25     <div class="item active">
26       <!-- 輪播項目中展示的圖檔 -->
27       <img src="example.jpg" alt="示例圖檔">
28       <div class="carousel-caption">
29         <!-- 标題或說明性文字，如果不需要，直接删除目前div.carousel-caption -->
30       </div>
31     </div>
32     <div class="item">
33       <!-- ... -->
34     </div>
35     <!-- ... -->
36   </div>
37   <!-- 圖檔輪播上左右兩個控制按鈕，分别點選可以滾動到上一張和下一張 -->
38   <!-- 此處需要注意的是 該a連結的href屬性必須指向需要控制的輪播圖ID -->
39   <!-- 另外a連結中的data-slide="prev"代表點選該連結會滾到上一張，如果設定為next的話則相反 -->
40   <a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev">
41     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
42     <span class="sr-only">上一張</span>
43   </a>
44   <a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next">
45     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
46     <span class="sr-only">下一張</span>
47   </a>
48 </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

　　　　+ 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、根據螢幕大小設定輪播圖檔

1 var windowWidth = $(window).width();  // 擷取螢幕寬度
 2 var isSmallScreen = windowWidth < 768;  // 判斷螢幕屬于大還是小
 3 // 根據大小為界面上的每一張輪播圖設定背景
 4 // $('#main_ad > .carousel-inner > .item') // 擷取到的是一個DOM數組（多個元素）
 5 $('#main_ad > .carousel-inner > .item').each(function(i, item) {
 6 var $item = $(item);// 因為拿到是DOM對象 需要轉換
 7 // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
 8 var imgSrc =
 9 isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
10 
11 // 設定背景圖檔
12 $item.css('backgroundImage', 'url("' + imgSrc + '")');
13 });      

2、window resize事件

由于上一步我們實作的過程是指在頁面加載完成判斷一次，

- 當使用者手動調整頁面寬度過後沒有及時發生變化，

- 是以我們可以通過window的resize事件中重新完成以上操作來解決這個問題

1 function 視窗變化後執行的函數名(){
2   // 具體的操作
3 }
4 $(window).on('resize', 視窗變化後執行的函數名);
5 ```
6 
7 - 這個事件隻會在視窗尺寸發生變化後執行，但是我們需要一開始時執行一次      

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

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

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

　　- 小圖如果還是使用背景的方式，當螢幕特别小時，效果很差

　　- 是以當使用小圖時，改用img的方式

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

　　按照目前的情況，如果是小圖展示則不需要給容器加上410px的固定高度

　　- 是以我們可以通過CSS媒體查詢的方式解決

1 #main_ad > .carousel-inner > .item {
 2   background-repeat: no-repeat;
 3   background-position: center center;
 4   background-size: cover;
 5 }
 6 @media (min-width: 768px) {
 7   #main_ad > .carousel-inner > .item {
 8     height: 410px;
 9   }
10 }
11 #main_ad > .carousel-inner > .item > img {
12   width: 100%;
13 }      

四、栅格系統

網格系統

- 該闆塊當螢幕為中等尺寸時分為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