移動端網站的內容觸摸滑動

對項目的說明：

前一段時間移動端網站中要求實現一個“內容觸摸滑動”的功能，需求如下：

1. 通過點擊小圖顯示大圖；

2. 再次點擊大圖回到原來的小圖；

3. 圖片能夠滑動切換；

4. 顯示當前圖片的索引(目前我正在瀏覽哪一張圖片)。

自己寫了一些功能，完成了第 1、2 的需求，但是由於 js 基礎較差，就借用了 swiper 這個插件來完成了剩餘的兩個需求。

swiper常用於移動端網站的內容觸摸滑動。swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。swiper 中文網官方網站 http://www.swiper.com.cn/，裡面有詳細的 api 文檔和內容完善的線上演示。

首先展示下我的 demo 結構：

這是一個活動剪影分類，這個活動剪影中一共展示三個“項目(li)”，每一個項目裡面有多條列表項目用來包裹 img 顯示圖片。

解決問題的思路：

1. 由於每一個項目里只需要最多九張圖片，所以多餘的圖片將它刪除(這篇文章中順便也把這個功能實現了)；

2. 由於這裡有多個 silhouette-item，當我們點擊這個項目里的其中一張圖片的時候，可以在每一個 silhouette-item 的最後臨時創建一個 container 來存放需要展示的大圖的一個容器；

解決方法：

1. 對於 html, 代碼有些長，從上面的 demo 結構中就可以看出我的 html 代碼，

2. 對於 css, 代碼也有些長，但是沒有什麼特別需要指出的要點，看下麵的其中一條列表項目 (silhouette-item)的 最終顯示效果就夠了：

3. js 代碼：

/*===限制活動剪影的圖片個數，最大為 9 張===*/
for (var i = 0, listLen = $(".silhouette-img-list").length; i < listLen; i++) {
    var $lis = $(".silhouette-img-list").find("li");
    var liLen = $(".silhouette-img-list").eq(i).find("li").length;
    if (liLen > 9) {
        for (var j = 9; j < liLen; j++) {
            $($lis[j]).remove(); // 每一次刪除後 listLen 的值都會改變
        }
    }
}

對代碼細節的說明：

1. 因為每一個列表項目(silhouette-item)中都有 class 為 silhouette-img-list 的 ul 元素，所以外層定義了一個 for 迴圈用來找到具體是哪一個列表項目中的 ul 元素；

2. 第三行中 .eq(i) 的目的是定位具體的 ul.

3. 每一次刪除後 listLen 的值都會改變，所以要先把 listLen 的值確定下來，不能放在內層迴圈中來作為判斷。比如我們有 14 張圖片，則需要刪除 5 張，如果 listLen 沒有作為定值來判斷，而是每次內層迴圈後來比較，則比較的次數將會變少，第一次比較 9 < 14, 第二次比較 10 < 13, 第三次比較 11 < 12.只會執行三次迴圈，這樣會少刪除 2 張圖片，與我們的預期不符合。

/*===活動剪影，點擊圖片全屏展示，可滑動切換===*/
$(".silhouette-img-list li img").click(function() {
    // 獲取一條活動剪影列表中圖片的個數
    var img = $(this).parents(".silhouette-img-list").find("img");
    var imgLen = img.length;

    // 彈出層的寬度為瀏覽器可用的有效寬度，高度為瀏覽器的可用的有效高度 
    var w = window.innerWidth;
    var h = window.innerHeight;

    // 獲取頁面當前位置離視窗頂部的距離
    var top = document.body.scrollTop || document.documentElement.scrollTop;

    // 創建包裹大圖的 swiper-container 盒子    
    var $container = $('<div class="swiper-container"></div>');
    // pagination 設置分頁器
    var $pagination = $('<div class="swiper-pagination"></div>');          
    var $wrapper = $('<ul class="swiper-wrapper"></ul>');
    // item 用來存放圖片列表，模擬 html dom, 使用字元串連接的方式
    var item = "";

    // 用 for 迴圈，實現 html 中的 silhouette-img-list 部分的結構，並且為每一張大圖設置和對應的小圖一樣的 src 和 alt 屬性值
    for (var i = 0; i < imgLen; i++) {
        var src = $(img[i]).attr("src");
        var alt = $(img[i]).attr("alt");
　　　　 // <strong class="tips">再次點擊大圖返回</strong> 為後面添加，非必須(一般都知道吧！)
        item += "<li class='swiper-slide'><img class='swiper-img' src=" + src + " alt=" + alt + "><strong class='tips'>再次點擊大圖返回</strong></li>";
    }

    // 將子元素插入到父元素
    $($wrapper).append(item);
    $($container).prepend($wrapper);
    $($container).append($pagination);
    $(this).parents(".silhouette-item").append($container);

    // 下麵對 swiper 插件進行引用
    var mySwiper = new Swiper (".swiper-container", {
        direction: "horizontal",  // 水平方向滑動
        grabCursor : true,  // 滑鼠覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
        // loop: true,  // 為 true 時滑動到第一張和最後一張後依然可以滑動
        observer: true, //修改 swiper 自己或子元素時，自動初始化swiper
        observeParents: true, //修改swiper的父元素時，自動初始化swiper
        initialSlide: $(this).parent().index(), // 設定初始化時slide的索引
        pagination: ".swiper-pagination"  // 分頁器
　　});    

    // 為遮罩層和遮罩層內的圖片設置樣式
    $(".swiper-container").css({
        position: "absolute",
        top: top,  // 定位 top，以便大圖的遮罩背景出現在正確的位置，而不總是在頁面頂部
        left: 0,
        width: w,
        height: h
    });
    $(".swiper-slide").css({
        zIndex: 99,
        backgroundColor: "#000"  // 這是包裹大圖的 li 的背景
    });
    $(".swiper-img").css({  // 給圖片設置樣式，讓他居中顯示，並且寬度不要超過瀏覽器能顯示的有效寬度，高度自適應
        zIndex: 100,
        display: "block",
        position: "absolute",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        margin: "auto",
        maxWidth: "100%",
        height: "auto"
    });
    $(".tips").css({  // 這個是提示文本的樣式，非必須，可以省略
        zIndex: 200,
        display: "block",
        position: "absolute",
        bottom: "23px",          
        margin: "auto",
        width: "100%",
        textAlign: "center",
        paddingTop: "5px",
        paddingBottom: "5px",
        fontSize: "12px",
        backgroundColor: "rgba(0, 0, 0, .5)",
        color: "#fff"
    });
    // 點擊遮罩層刪除先前創建的節點
    $(".swiper-container:not('.swiper-pagination')").click(function() {
        $(this).remove();
    });
});

插入節點後的在 firefox 中顯示的效果和預期的一樣，只是截圖下來很醜，不貼上來了。

最後，在 chrome 瀏覽器中，測試效果如下：