swipe.js 2.0 輕量級框架實現mobile web 左右滑動

屬性總結筆記如下：

<style>
.swipe {
    overflow: hidden;   //隱藏溢出 清楚浮動
    visibility: hidden; //規定元素不可見 (可以設置，當事件觸發后，元素可見)
    position: relative; //表示相對於瀏覽器的定位，應用中是相當於前面的容器來定位的
} 
</style>
<script type="html/javascript">
　　$("#bannerControl li:first").addClass("active");   //向第一個li元素添加一個類active；之后可以用".active"來調用這個active類(jQuery中的addClass方法)
　　$("#bannerList li").css("width",$(window).width()+"px");  //設置li元素的一個或多個樣式屬性。以<name,value>對形式 ($(selector).css(name,value))$(window).width()瀏覽器可視寬度
　　
　　$(".banner").on("swipeleft",function(){          //在元素banner上,綁定swipeleft事件，事件被觸發時執行函數function{}

　　　　　　　　　　　　　　//見后面的myInner = setInterval(function(){})方法,關閉自動輪播效果
                        clearInterval(myInner);

　　　　　　　　　　　　　　//取到當前圖片的index索引值
                        var num = $("#bannerControl li.active").index();  //jQuery中.index()中搜索匹配元素，並返回元素的索引值；返回class=“active“的<li>元素在其同輩元素集合(<li>標簽集合)中的索引值。
                        
　　　　　　　　　　　　　　//根據當前索引，判斷向左滑動時候的next index
　　　　　　　　　　　　　　var count = num==(countPicNum-1)?0:num+1;

　　　　　　　　　　　　　　//jQuery中” :eq()選擇器 “(下標從0開始); 定義到next index的<li>標簽,添加class=”active“, jQuery中的" .siblings() ",查找標簽<li>集合中class=”active“的標簽，並將找到的標簽中的類class=”active“移除
                        $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                        
　　　　　　　　　　　　　　//jQuery中”translate()“實現過渡效果translate(Xpx,Ypx);X方向是右，Y方向是下。”+“是連接符,”-($(window).width()*count)px“表示向左移動指定像素個單位，translateZ定義了3D轉換(CSS3中屬性)
　　　　　　　　　　　　　　$("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");

　　　　　　　　　　　　　　//函數定義了自動輪播效果,每隔3000毫秒輪播下一張圖片
                        myInner = setInterval(function(){
                            var num = $("#bannerControl li.active").index();
                            var count = num==(countPicNum-1)?0:num+1;
                            $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                            $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");
                        },3000);
                    });　　　

　　　
　　　　success : function(data) {

　　　　//我們試着添加alert(data["data"]);會返回[object, Object],[object, Object],[object, Object]

　　　　　　　　　//responseCode表示正常的登錄狀態
                if(0000==data["responseCode"]){

　　　　　　　　　　　　//這個for循環, 添加所有的<li>標簽
                    for(var i=0; i<data["data"].length; i++){

　　　　　　　　　　　　　　//jQuery中的.append()方法, 在標簽<ul id="bannerList"></ul>中添加<li></li>標簽。每個標簽中定義了圖片屬性。
                        $("#bannerList").append('<li><a href="'+data["data"][i]["linkUrl"]+'" target="_self"><img src="'+data["data"][i]["picUrl"]+'" alt="'+data["data"][i]["picName"]+'"></a></li>');
                        $("#bannerControl").append('<li></li>');
                    }

　　　　　　　　　　　　//定義了圖片的總張數 變量countPicNum來表示
                    var countPicNum = data["data"].length;

　　　　　　　　　　　　
                    $(".control").css({"width":(countPicNum*15)+"px"});
                    $("#bannerControl").css("margin-left",-countPicNum*15*0.5+"px");
                    $("#bannerControl li:first").addClass("active");
                    $("#bannerList li").css("width",$(window).width()+"px");
                    $("#bannerList").css("width",($(window).width()*countPicNum)+"px");

　　　　　　　　　　　　//定義了默認的自動輪播效果
                    $("#bannerControl li").on("click",function(){
                        clearInterval(myInner);
                        var num = $(this).index();
                        $(this).addClass("active").siblings(this).removeClass("active");
                        $("#bannerList").css("transform","translate("+-($(window).width()*num)+"px, 0px) translateZ(0px)");
                        myInner = setInterval(function(){
                            var num = $("#bannerControl li.active").index();
                            var count = num==(countPicNum-1)?0:num+1;
                            $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                            $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");
                        },3000);
                    });
                    var myInner = setInterval(function(){
                        var num = $("#bannerControl li.active").index();
                        var count = num==(countPicNum-1)?0:num+1;
                        $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                        $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");
                        //$("#bannerList").animate({"margin-left":-($(window).width()*count)+"px"});
                    },3000);　　　　　　　　　　　　　　　　　　　　　　　　　　　　
</script>

 那么我們找到了完美的輕量級替代方案，swipe.js 2.0.具體如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mobile web輪播Demo展示</title>
</head>

//引入css樣式
<link rel="stylesheet" type="text/css" href="css/swipe.css">
<body>
<div class="addWrap">
  <div class="swipe" id="mySwipe">
    <div class="swipe-wrap">

　　　　//<a>標簽的href屬性用於指定超鏈接目標的URL，href屬性的值可以是任何有效的相對或絕對的URL，包括片段標識符和JavaScript代碼段。
　　　　//javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼，而 javascript:; 表示什么都不執行，這樣點擊<a>時就沒有任何反應。當頁面內容很多，有滾動條時，頁面不會亂跳，用戶體驗更好。
      <div><a href="javascript:;"><img class="img-responsive" src="images/1.jpg"/></a></div>
      <div><a href="javascript:;"><img class="img-responsive" src="images/2.jpg"/></a></div>
      <div><a href="javascript:;"><img class="img-responsive" src="images/3.jpg"/></a></div>
    </div>
  </div>

　//
  <ul id="position">
    <li class="cur"></li>
    <li class=""></li>
    <li class=""></li>
  </ul>
</div>
<script src="js/swipe.js"></script> 
<script type="text/javascript">

//上文中<ul id="position">DOM中Element對象，表示HTML元素。
var bullets = document.getElementById('position').getElementsByTagName('li');
var banner = Swipe(document.getElementById('mySwipe'), {
　　
　　 //開始自動幻燈片(以毫秒為單位 幻燈片之間的時間)     auto: 2000,

　　 //continuous Boolean(default:true)創建一個無線的循環(當滑動到所有動畫結束時是否循環滑動)
    continuous: true,

　　 //disableScroll Boolean(default:false) 當滾動滾動條時 是否停止幻燈片滾動     disableScroll:false,

　　 //幻燈片運行中的回調函數     callback: function(pos) {
        var i = bullets.length;
        while (i--) {
          bullets[i].className = ' ';
        }
        bullets[pos].className = 'cur';
    }
});
</script>
</body>
</html>

 關於上述代碼中的兩個兩個引用：一個關於swipe.js(更改了其中的stop函數，保證觸摸之后，繼續執行自動輪播功能)，另外一個是swipe.css(由於自己的mobile web頁面與源碼有沖突，故而分析swipe.css如下)

//標簽選擇器，讓總的<body>標簽的外邊距和內邊距為0
body{ margin:0; padding:0}

//針對class=“addWrap”的標簽，position：relative表示相對於前面的容器定位的。background:#fff表示背景是白色; .addWrap{ position:relative; width:100%;background:#fff;margin:0; padding:0;}

//對於class=“addWrap”子節點中class=“swipe”的標簽，overflow: hidden;規定了當內容溢出元素框時會發生的事情(hidden表示溢出內容會被修剪，且多余內容是不可見的;)
//visibility: hidden;該屬性規定了元素是否可見。即規定了class=“swipe”的標簽是不可見的；同樣的position:relative；表示相對溢出
.addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;}

.addWrap .swipe-wrap{overflow:hidden;position:relative;}

//其中 .swip-wrap > div 表示swipe-wrap元素的所有子div元素。如果不加 > 這個符號的話，會包括子子孫孫的所有子節點，子節點的子節點。
//float:left是一個關鍵屬性，它表示向左浮動。比如多個div在一個頁面上，默認情況是：一行一個div，但是只要在div的css中使用float：left，
//可以使一行有多個div，這樣可以把網頁划分成很多塊，但是使用該屬性會影響后面的元素，所有如果后面的div不想再被影響，可以使用clear:both；
//可以理解為清除float:left和float:right的影響，返回到默認狀態。像<ul><li></li></ul>也可以這么使用，做導航菜單基本上有這個元素,使用float:left使其橫向顯示。
.addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}

//position:absolute;表示絕對定位，把它固定到你想要固定到的位置。當使用絕對定位的時候，后面跟的是定位的具體位置參數。如bottom：0.它表示把圖像的底邊緣設置在其包含元素底邊緣之上5像素高的位置。
//表示位置屬性的單位都是像素px。background:#000;表示顏色為黑色。
//opacity: 0.4; 用於設置標簽元素的不透明級別。0.0表示完全透明；1.0表示完全不透明。
//同樣的，CSS3中width:100%;表示的就是自適應寬度。width:100%是直接基於父級DIV的寬度（寬度要指定）。
//filter: alpha(opacity=50);alpha是用來設置透明度的，其中opacity表示透明度數。0表示完全透明，100表示完全不透明。
//CSS3中的屬性text-align:right;表示元素中的文本的水平對齊方式。
#position{ position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}

//display:inline-block;將對象呈遞為內聯對象。-webkit-border-radius:5px;對於webkit內核的瀏覽器設置<li>元素四個角的5像素的圓角效果。用於設置一個小長方形的圓角效果。
//CSS3中border-radius:5px;添加圓角邊框，設置了四個角的邊框是5px像素。 #position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}
#position li.cur{background-color:#FF0000;}

//這個class=img-responsive屬性中，表示將來img標簽，也就是圖片標簽變成一個區塊兒。讓圖片元素的顯示為塊級元素，這樣就可以像塊一樣的去操作圖片了。
//max-width: 100%; 最大寬度屬性，用來定義寬度顯示的最大值 .img-responsive { display: block; max-width: 100%;  height: auto;}

接下來需要熟練使用Chrome的F12調試器來來按照參考demo的swipe.js對原本頁面進行調試，達到一樣的頁面布局和樣式效果。下面是自己自學的總結筆記如下：

　　修改bug的模式是什么？一個一個的修改，然后再到瀏覽器去一次又一次的刷新？但隨着經驗的增長，自己也感覺這樣修改的模式是煩人的、效率低下的，那有沒有一種方式是可以快速修改，所見所得，回答是有的！

　　Chrome

 

 

　　總結如下：

1，overflow：hidden與visibility：hidden屬性比較：overflow：hidden是隱藏溢出，清楚浮動；visibility：hidden是屬性不可見。