一步一步構建手機WebApp開發——頁面布局篇

　　繼上一篇：一步一步構建手機WebApp開發——環境搭建篇過后，我相信很多朋友都想看看實戰案例，這一次的教程是頁面布局篇，先上圖：

　　

　　如上圖所示，此篇教程便是教初學者如何快速布局這樣的頁面。廢話少說，直接上代碼

 

注意：此教程是接上一篇教程，也就是所有的內容是直接從body開始寫，當然，也會貼出所有代碼給大家。

 

第一步：框架的布局及幻燈片的布局（Html)

　　① 如上圖所示，我們應該准備以下容器，方便填充內容

 <!--頁面容器-->
    <div class="page-container min-height">
        <!--頭部-->
        <div id="head">
	</div>

        <!--幻燈片-->
        <div id="banner" class="position-relative">
        </div>

        <!--主體-->
        <div id="main">
            <!--方塊菜單-->
            <div class="menu min-height">
            </div>

            <!--描述-->
            <div class="copyright clear">
            </div>
        </div>

        <!--頁腳-->
        <div id="footer" class="position-fixed">
        </div>
    </div>

　　② 由於此模板沒有頭部，所有直接從幻燈片div開始寫起，准備三張圖片，然后通過<ul>，<li>布局

　　

<!--幻燈片-->
        <div id="banner" class="position-relative">
            <ul>
                <li><a href="#" title=""><img src="imgs/banner1.jpg" alt="" title="" /></a></li>
                <li><a href="#" title=""><img src="imgs/banner2.jpg" alt="" title="" /></a></li>
                <li><a href="#" title=""><img src="imgs/banner3.jpg" alt="" title="" /></a></li>
            </ul>
        </div>

　　

第二步：框架的布局樣式及幻燈片的布局樣式（Css)

　　① 公共庫樣式

/* 禁用iPhone中Safari的字號自動調整 */
html { -webkit-text-size-adjust: none; }
/* 設置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* 設置圖片視頻等自適應調整 */
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
.video embed, .video object, .video iframe { width: 100%; height: auto; }

/* 公共庫 */
a { text-decoration: none; cursor: pointer; }
li { list-style: none; }
a { text-decoration: none; color: #555756; }
a:hover { color: #141414; text-decoration: none; }
a img { border: none; }
a > img { vertical-align: bottom; }
.min-height { min-height: 0; height: auto; _height: 0; overflow: hidden; _overflow: visible; }
.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.position-fixed { position: fixed; }
.overflow-hidden { overflow: hidden; }
.display-inline-block { display: inline-block; }

　　② 頁面容器及幻燈片樣式

/* 頁面主代碼 */
body { font: 14px/22px "Georgia", Helvetica, Arial, sans-serif; background: #fff; color: #595959; overflow-y: scroll; overflow-x: hidden; *overflow-y: auto !important; }
/*設置容器最大寬度為640*/
.page-container { max-width: 640px; margin: 0 auto; padding-bottom: 60px; }

/*幻燈片*/
#banner { width: 100%; overflow: hidden; position: relative; }
#banner ul li { display: none; float: left; }
#banner ul li:first-of-type { display: block; }

　　上面一步如下圖所示：

 

 

第三步：創建公共腳本類庫，並拓展Jquery對象實現簡單插件並初步調用（common.js)

　　① 添加Jquery拓展幻燈片插件，不懂Jquery插件的，請移步：Jquery插件精品教程，這是我認為最好的教程

//頁面特效，這里用到jquery最簡單的插件寫法
$.extend({
    banner: function (ele) {
       
    }
});

　　② 在前台頁面引用（common.js),並調用幻燈片插件

 <script type="text/javascript" src="scripts/common.js"></script>
<script type="text/javascript">
        $(function () {
            $.banner("#banner");
        })
</script>

 

第四步：實現幻燈片banner的核心方法

　①  獲取幻燈片的個數

var imgSize = $(ele).find("img").size();

　　② 獲取幻燈片的寬度和寬度

 var imgWidth = $(ele).width();
 var imgHeight = $(ele).height();

　　③ 設置 <ul> 標簽的寬度為：個數*單個寬度，及阻止li繼承父類，這樣為了讓<li>有足夠的空間浮動成行排列，並顯示所有幻燈片

$(ele).children("ul").width(imgSize * imgWidth).children("li").width(imgWidth).show();

　　④ 根據幻燈片個數生成按鈕

 // 4.0.1 創建按鈕容器並添加樣式
        $btn = $("<div class='btn position-absolute'></div>");
        $btn.css({
            "z-index": "100",
            "width": "100%",
            "height": "20px",
            "left": "0",
            "top": (imgHeight - 20) + "px",
            "line-height": "20px",
            "text-align": "center"
        });

        // 4.0.2 生成按鈕，特別聲明：以下的樣式大可在css文件中定義，在這里我就不定義了。
        for (var i = 0; i < imgSize; i++) {
            $dot = $("<span class='dot display-inline-block'></span>");
            $dot.css({
                "width": "12px",
                "height": "12px",
                "border-radius": "50%",
                "background": "#fff",
                "margin-right": "8px"
            });
            $btn.append($dot);
        }

        // 4.0.3 設置第一個選中，選中樣式為active，
        $btn.find("span:eq(0)").attr("id", "active").css({ "background": "#f00" });

        // 4.0.4 添加到容器中
        $(ele).append($btn);

　　* 定義標識變量，判斷幻燈片是否完整執行動畫

 var isEnd = true;   // 定義標識，判斷是否滑動完成

　　⑤ 為生成的按鈕綁定點擊事件

$btn.children("span").on({
            click: function () {
                // 5.0.1 獲取點擊的索引
                var index = $(this).index();

                // 5.0.2 為點擊的按鈕添加選中樣式，並滑動幻燈片
                $(this).attr("id", "active").css({ "background": "#f00" }).siblings("span").removeAttr("id").css({ "background": "#fff" });

                // 5.0.3 滑動幻燈片
                if (isEnd == true) {
                    isEnd == false;
                    $(ele).children("ul").animate({
                        marginLeft: -index * imgWidth
                    }, 300, function () {
                        isEnd = true;
                    });
                }
            }
        });

　　⑥ 為幻燈片添加觸摸事件，前台必須引用hammer.js

 // 6.0.1 創建一個新的hammer對象並且在初始化時指定要處理的dom元素
        var hammertime = new Hammer($(ele)[0]);
        hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

        // 向左滑動
        hammertime.on("swipeleft", function (e) {
            // 6.0.2 判斷當前幻燈片的索引
            var currentIndex = $btn.find("span#active").index();

            // 6.0.3 判斷是否是最后一張
            if (currentIndex + 1 < imgSize) {
                // 主動點擊按鈕
                $btn.children("span").eq(currentIndex + 1).click();
            }
        });
        // 向右滑動
        hammertime.on("swiperight", function (e) {
            // 6.0.2 判斷當前幻燈片的索引
            var currentIndex = $btn.find("span#active").index();

            // 6.0.4 判斷是否是第一張
            if (currentIndex > 0) {
                $btn.children("span").eq(currentIndex - 1).click();
            }
        });

　　

經過上面6個小節，一個幻燈片滑動就弄好了，支持觸屏滑動，完整代碼為：

//頁面特效，這里用到jquery最簡單的插件寫法
$.extend({
    /******************************* 手機幻燈片特效開始***************************/
    banner: function (ele) {
        // 1.0 獲取幻燈片的個數
        var imgSize = $(ele).find("img").size();

        // 2.0 獲取幻燈片的寬度和寬度
        var imgWidth = $(ele).width();
        var imgHeight = $(ele).height();

        // 3.0 設置 <ul> 標簽的寬度為：個數*單個寬度，及阻止li繼承父類，這樣為了讓<li>有足夠的空間浮動成行排列，並顯示所有幻燈片
        $(ele).children("ul").width(imgSize * imgWidth).children("li").width(imgWidth).show();

        // 4.0 根據幻燈片個數生成按鈕

        // 4.0.1 創建按鈕容器並添加樣式
        $btn = $("<div class='btn position-absolute'></div>");
        $btn.css({
            "z-index": "100",
            "width": "100%",
            "height": "20px",
            "left": "0",
            "top": (imgHeight - 20) + "px",
            "line-height": "20px",
            "text-align": "center"
        });

        // 4.0.2 生成按鈕，特別聲明：以下的樣式大可在css文件中定義，在這里我就不定義了。
        for (var i = 0; i < imgSize; i++) {
            $dot = $("<span class='dot display-inline-block'></span>");
            $dot.css({
                "width": "12px",
                "height": "12px",
                "border-radius": "50%",
                "background": "#fff",
                "margin-right": "8px"
            });
            $btn.append($dot);
        }

        // 4.0.3 設置第一個選中，選中樣式為active，
        $btn.find("span:eq(0)").attr("id", "active").css({ "background": "#f00" });

        // 4.0.4 添加到容器中
        $(ele).append($btn);

        var isEnd = true;   // 定義標識，判斷是否滑動完成

        // 5.0 為生成的按鈕綁定點擊事件
        $btn.children("span").on({
            click: function () {
                // 5.0.1 獲取點擊的索引
                var index = $(this).index();

                // 5.0.2 為點擊的按鈕添加選中樣式，並滑動幻燈片
                $(this).attr("id", "active").css({ "background": "#f00" }).siblings("span").removeAttr("id").css({ "background": "#fff" });

                // 5.0.3 滑動幻燈片
                if (isEnd == true) {
                    isEnd == false;
                    $(ele).children("ul").animate({
                        marginLeft: -index * imgWidth
                    }, 300, function () {
                        isEnd = true;
                    });
                }
            }
        });

        // 6.0 為幻燈片添加觸摸事件，前台必須引用hammer.js

        // 6.0.1 創建一個新的hammer對象並且在初始化時指定要處理的dom元素
        var hammertime = new Hammer($(ele)[0]);
        hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

        // 向左滑動
        hammertime.on("swipeleft", function (e) {
            // 6.0.2 判斷當前幻燈片的索引
            var currentIndex = $btn.find("span#active").index();

            // 6.0.3 判斷是否是最后一張
            if (currentIndex + 1 < imgSize) {
                // 主動點擊按鈕
                $btn.children("span").eq(currentIndex + 1).click();
            }
        });
        // 向右滑動
        hammertime.on("swiperight", function (e) {
            // 6.0.2 判斷當前幻燈片的索引
            var currentIndex = $btn.find("span#active").index();

            // 6.0.4 判斷是否是第一張
            if (currentIndex > 0) {
                $btn.children("span").eq(currentIndex - 1).click();
            }
        });

        /******************************* 手機幻燈片特效結束***************************/
        /*
         * 注：完善版應該還有自動滑動，和監控瀏覽器時間，在這里我就不詳細寫了，除非有朋友要求
         */
    }
});

 

第五步：實現方塊按鈕菜單的布局（Html）

<!--方塊菜單-->
            <div class="menu min-height">
                <a href="" title="關於我們"><span>關於我們</span></a>
                <a href="" title="設計團隊"><span>設計團隊</span></a>
                <a href="" title="經典案例"><span>經典案例</span></a>
                <a href="" title="服務保障"><span>服務保障</span></a>
                <a href="" title="優惠活動"><span>優惠活動</span></a>
                <a href="" title="裝飾課堂"><span>裝飾課堂</span></a>
                <a href="" title="會議中心"><span>會議中心</span></a>
                <a href="" title="聯系我們"><span>聯系我們</span></a>
            </div>

 

第六步：實現方塊按鈕菜單的布局樣式（Css）

　① 四列布局算法：讓所有方塊的margin-left為：1.5%，這樣就有1.5%*5=7.5%個縫隙，那么每一個方塊的寬度為： 23.125%，代碼如下：

/* 方塊菜單 */
.menu a { display: block; float: left; width: 23.125%; height: 80px; margin: 5px 0 0 1.5%; color: #fff; }
.menu a span { padding: 5px; }

　　② 逐步為各個方塊設置樣式及特殊樣式，首先需要掌握CSS3 選擇器：nth-child，意思就是獲取第幾個，CSS3選擇器教程：請移步：CSS3選擇器

/*由於第一個垮了兩個方塊，也就是 23.125%*2+1.5%=47.75%，其中1.5%是一個縫隙（margin-left)*/
.menu a:nth-child(1) { background: #666666; width: 47.75%; height: 165px; }
.menu a:nth-child(2) { background: #1673d2; }
.menu a:nth-child(3) { background: #008a00; }
.menu a:nth-child(4) { background: #8d0196; width: 47.75%; }
.menu a:nth-child(5) { background: #59d5e6; }
.menu a:nth-child(6) { background: #fd5c04; }
.menu a:nth-child(7) { background: #e86eb2; }
.menu a:nth-child(8) { background: #666666; }

　　

經過上面兩步，方塊菜單制作完成，如下圖所示：

 

第七步：添加版權描述（比較簡單，Html和CSS一起寫）

　　Html

<!--描述-->
            <div class="copyright clear">
                版權所有：新生帝
            </div>

　　Css

/* 版權 */
.copyright { padding: 8px; text-align: center; color: #444; }

 

第八步：添加底部固定菜單

　　Html

<!--頁腳-->
        <div id="footer" class="position-fixed">
            <ul>
                <li><a href="" title="">網站地圖</a></li>
                <li><a href="" title="">關於我們</a></li>
                <li><a href="" title="">聯系我們</a></li>
            </ul>
        </div>

　　Css

/* 底部 */
#footer { bottom: 0; height: 40px; width: 100%; z-index: 101; background: #333333; }
#footer ul li { width: 33%; height: 40px; margin: 0 0 0 0.25%; float: left; line-height: 40px; text-align: center; }
#footer ul li a { color: #fff; }
#footer ul li { background: #ccc; }

　　

經過上面八個步驟，一個完整的頁面布局制作完畢！！！！

所有代碼如下：

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--禁止瀏覽器縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />
    <!--清除瀏覽器緩存-->
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <!--iPhone 手機上設置手機號碼不被顯示為撥號鏈接）-->
    <meta content="telephone=no, address=no" name="format-detection" />
    <!--IOS私有屬性，可以添加到主屏幕-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--屏幕頂部條的顏色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>SaveMoney</title>
    <!-- 重置樣式 -->
    <link type="text/css" href="css/reset.css" rel="stylesheet" />
    <!-- 主樣式 -->
    <link type="text/css" href="css/common.css" rel="stylesheet" />
    <!-- Jquery庫 -->
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <!-- 手機觸摸插件 -->
    <script type="text/javascript" src="scripts/hammer.js"></script>
    <!--公共腳本庫-->
    <script type="text/javascript" src="scripts/common.js"></script>
    <!--讓IE8，IE9，支持Html5和Css3-->
    <!--[if lte IE 8]>
        <script src="scripts/selectivizr.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
        <script src="scripts/css3-mediaqueries.js"></script>
        <script src="scripts/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <!--頁面容器-->
    <div class="page-container min-height">
        <!--頭部-->
        <div id="head"></div>
        <!--幻燈片-->
        <div id="banner" class="position-relative">
            <ul>
                <li><a href="#" title=""><img src="imgs/banner1.jpg" alt="" title="" /></a></li>
                <li><a href="#" title=""><img src="imgs/banner2.jpg" alt="" title="" /></a></li>
                <li><a href="#" title=""><img src="imgs/banner3.jpg" alt="" title="" /></a></li>
            </ul>
        </div>
        <!--主體-->
        <div id="main">
            <!--方塊菜單-->
            <div class="menu min-height">
                <a href="" title="關於我們"><span>關於我們</span></a>
                <a href="" title="設計團隊"><span>設計團隊</span></a>
                <a href="" title="經典案例"><span>經典案例</span></a>
                <a href="" title="服務保障"><span>服務保障</span></a>
                <a href="" title="優惠活動"><span>優惠活動</span></a>
                <a href="" title="裝飾課堂"><span>裝飾課堂</span></a>
                <a href="" title="會議中心"><span>會議中心</span></a>
                <a href="" title="聯系我們"><span>聯系我們</span></a>
            </div>
            <!--描述-->
            <div class="copyright clear">
                版權所有：新生帝
            </div>
        </div>
        <!--頁腳-->
        <div id="footer" class="position-fixed">
            <ul>
                <li><a href="" title="">網站地圖</a></li>
                <li><a href="" title="">關於我們</a></li>
                <li><a href="" title="">聯系我們</a></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            $.banner("#banner");
        })
    </script>
</body>
</html>

　　Common.css

/* 禁用iPhone中Safari的字號自動調整 */
html { -webkit-text-size-adjust: none; }
/* 設置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* 設置圖片視頻等自適應調整 */
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
.video embed, .video object, .video iframe { width: 100%; height: auto; }

/* 公共庫 */
a { text-decoration: none; cursor: pointer; }
li { list-style: none; }
a { text-decoration: none; color: #555756; }
a:hover { color: #141414; text-decoration: none; }
a img { border: none; }
a > img { vertical-align: bottom; }
.min-height { min-height: 0; height: auto; _height: 0; overflow: hidden; _overflow: visible; }
.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.position-fixed { position: fixed; }
.overflow-hidden { overflow: hidden; }
.display-inline-block { display: inline-block; }


/* 頁面主代碼 */
body { font: 14px/22px "Georgia", Helvetica, Arial, sans-serif; background: #fff; color: #595959; overflow-y: scroll; overflow-x: hidden; *overflow-y: auto !important; }
/*設置容器最大寬度為640*/
.page-container { max-width: 640px; margin: 0 auto; padding-bottom: 60px; }

/*幻燈片*/
#banner { width: 100%; overflow: hidden; position: relative; }
#banner ul li { display: none; float: left; }
#banner ul li:first-of-type { display: block; }

/* 方塊菜單 */
.menu a { display: block; float: left; width: 23.125%; height: 80px; margin: 5px 0 0 1.5%; color: #fff; }
.menu a span { padding: 5px; }
/*由於第一個垮了兩個方塊，也就是 23.125%*2+1.5%=47.75%，其中1.5%是一個縫隙（margin-left)*/
.menu a:nth-child(1) { background: #666666; width: 47.75%; height: 165px; }
.menu a:nth-child(2) { background: #1673d2; }
.menu a:nth-child(3) { background: #008a00; }
.menu a:nth-child(4) { background: #8d0196; width: 47.75%; }
.menu a:nth-child(5) { background: #59d5e6; }
.menu a:nth-child(6) { background: #fd5c04; }
.menu a:nth-child(7) { background: #e86eb2; }
.menu a:nth-child(8) { background: #666666; }

/* 版權 */
.copyright { padding: 8px; text-align: center; color: #444; }

/* 底部 */
#footer { bottom: 0; height: 40px; width: 100%; z-index: 101; background: #333333; }
#footer ul li { width: 33%; height: 40px; margin: 0 0 0 0.25%; float: left; line-height: 40px; text-align: center; }
#footer ul li a { color: #fff; }
#footer ul li { background: #ccc; }



/*響應式媒體查詢，*/

/*
 * -----------------------------------------
 *  320 ~ 480
 * -----------------------------------------
 */
@media only screen and (min-width: 320px) and (max-width: 480px) {
}

/*
 * -----------------------------------------
 *  321 ~   寬大於321的設備
 * -----------------------------------------
 */
@media only screen and (min-width: 321px) {
}

/*
 * -----------------------------------------
 *  ~ 320  寬小於320的設備
 * -----------------------------------------
 */
@media only screen and (max-width: 320px) {
}

/*
 * -----------------------------------------
 *  ~ 480  寬小於480的設備
 * -----------------------------------------
 */
@media only screen and (max-width: 480px) {
}

/* medium screens (excludes iPad & iPhone) */
/*
 * -----------------------------------------
 * 481 ~ 767  寬大於480且小於767的iPad和iPhone
 * -----------------------------------------
 */
@media only screen and (min-width: 481px) and (max-width: 767px) {
}

/* ipads (portrait and landscape) */
/*
 * -----------------------------------------
 * 768 ~ 1024  寬大於480且小於1024的iPad和iPhone
 * -----------------------------------------
 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* ipads (landscape) */
/*
 * -----------------------------------------
 * 768 ~ 1024  寬大於480且小於1024的iPad和iPhone
 * -----------------------------------------
 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

/* ipads (portrait) */
/*
 * -----------------------------------------
 * 768 ~ 1024  寬大於480且小於1024的iPad和iPhone
 * -----------------------------------------
 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}

/*
 * -----------------------------------------
 * 1444 ~ 1824  寬大於1444且小於1824的設備
 * -----------------------------------------
 */
@media only screen and (min-width: 1444px) and (max-width: 1824px) {
}

/*
 * -----------------------------------------
 * 1824 ~  寬大於1824的設備
 * -----------------------------------------
 */
@media only screen and (min-width: 1824px) {
}

/*
 * -----------------------------------------
 * 2224 ~  寬大於2224的設備
 * -----------------------------------------
 */
@media only screen and (min-width: 2224px) {
}

/* iphone 4 and high pixel ratio (1.5+) devices */
/*
 * -----------------------------------------
 * iphone4 ~ 
 * -----------------------------------------
 */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}

　　Common.Js

//頁面特效，這里用到jquery最簡單的插件寫法
$.extend({
    /******************************* 手機幻燈片特效開始***************************/
    banner: function (ele) {
        // 1.0 獲取幻燈片的個數
        var imgSize = $(ele).find("img").size();

        // 2.0 獲取幻燈片的寬度和寬度
        var imgWidth = $(ele).width();
        var imgHeight = $(ele).height();

        // 3.0 設置 <ul> 標簽的寬度為：個數*單個寬度，及阻止li繼承父類，這樣為了讓<li>有足夠的空間浮動成行排列，並顯示所有幻燈片
        $(ele).children("ul").width(imgSize * imgWidth).children("li").width(imgWidth).show();

        // 4.0 根據幻燈片個數生成按鈕

        // 4.0.1 創建按鈕容器並添加樣式
        $btn = $("<div class='btn position-absolute'></div>");
        $btn.css({
            "z-index": "100",
            "width": "100%",
            "height": "20px",
            "left": "0",
            "top": (imgHeight - 20) + "px",
            "line-height": "20px",
            "text-align": "center"
        });

        // 4.0.2 生成按鈕，特別聲明：以下的樣式大可在css文件中定義，在這里我就不定義了。
        for (var i = 0; i < imgSize; i++) {
            $dot = $("<span class='dot display-inline-block'></span>");
            $dot.css({
                "width": "12px",
                "height": "12px",
                "border-radius": "50%",
                "background": "#fff",
                "margin-right": "8px"
            });
            $btn.append($dot);
        }

        // 4.0.3 設置第一個選中，選中樣式為active，
        $btn.find("span:eq(0)").attr("id", "active").css({ "background": "#f00" });

        // 4.0.4 添加到容器中
        $(ele).append($btn);

        var isEnd = true;   // 定義標識，判斷是否滑動完成

        // 5.0 為生成的按鈕綁定點擊事件
        $btn.children("span").on({
            click: function () {
                // 5.0.1 獲取點擊的索引
                var index = $(this).index();

                // 5.0.2 為點擊的按鈕添加選中樣式，並滑動幻燈片
                $(this).attr("id", "active").css({ "background": "#f00" }).siblings("span").removeAttr("id").css({ "background": "#fff" });

                // 5.0.3 滑動幻燈片
                if (isEnd == true) {
                    isEnd == false;
                    $(ele).children("ul").animate({
                        marginLeft: -index * imgWidth
                    }, 300, function () {
                        isEnd = true;
                    });
                }
            }
        });

        // 6.0 為幻燈片添加觸摸事件，前台必須引用hammer.js

        // 6.0.1 創建一個新的hammer對象並且在初始化時指定要處理的dom元素
        var hammertime = new Hammer($(ele)[0]);
        hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });　　// 此代碼會導致滾動條不能滑動，請注釋后再使用

        // 向左滑動
        hammertime.on("swipeleft", function (e) {
            // 6.0.2 判斷當前幻燈片的索引
            var currentIndex = $btn.find("span#active").index();

            // 6.0.3 判斷是否是最后一張
            if (currentIndex + 1 < imgSize) {
                // 主動點擊按鈕
                $btn.children("span").eq(currentIndex + 1).click();
            }
        });
        // 向右滑動
        hammertime.on("swiperight", function (e) {
            // 6.0.2 判斷當前幻燈片的索引
            var currentIndex = $btn.find("span#active").index();

            // 6.0.4 判斷是否是第一張
            if (currentIndex > 0) {
                $btn.children("span").eq(currentIndex - 1).click();
            }
        });

        /******************************* 手機幻燈片特效結束***************************/
        /*
         * 注：完善版應該還有自動滑動，和監控瀏覽器時間，在這里我就不詳細寫了，除非有朋友要求
         */
    }
});

　　

Demo:下載 http://pan.baidu.com/s/1sj6wlC5

 

 

補充說明：hammer.js會阻止瀏覽器滾動條滑動，也就是默認事件，可以注釋觸摸的代碼：

        //hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

　　注釋這一行就不會出現不能滑動滾動條了。因為hammer.js默認不啟用上下滑動事件，而啟用上下滑動事件會阻止瀏覽器默認事件，當然，此教程沒有用到上下滑動，所以注釋這行代碼就可以了。

 

hammer.js開發教程：http://www.cnblogs.com/iamlilinfeng/p/4239957.html
hammer.js 中文翻譯官方文檔：http://www.tuicool.com/articles/VNRjym7

jquery插件精品教程，我認為寫的最好的：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

 

下一篇實戰內容截圖：手把手，一步一步構建WebApp——完整項目篇，此項目用到編程：本人用的是Mvc5+EF6+IOC+MSSql2008來編寫。特別說明一下：本人是個程序員，可以說是.Net,PHP,Object-C的程序員，以后這方面的也可以幫組大家。

 

 

等做完這些教程，就寫一個IOS和WP8.1的App，全程實錄給大家學習，帶大家入門，並且幫組喜歡.Net的朋友，帶大家學習一下內容，全部都全程實錄：

 C#、Lambda、LINQ、EntityFramework、ASP.NET、SQL、HTML、CSS、Javascript、XML、JQuery、Ajax、MVC、WPF、XAML、WCF、WF、Silverlight、Flex、Lucene、Quartz.NET、SVN、Nginx、Redis、Memcached、Sprint.Net、IOC、Aop、PHP、MySql、ThinkPHP、Smarty、敏捷開發、分布式開發、響應式開發、UML、單元測試、、、、、、這些都是我擅長的領域！謝謝大家支持！