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="data:images/1.jpg"/></a></div>
      <div><a href="javascript:;"><img class="img-responsive" src="data:images/2.jpg"/></a></div>
      <div><a href="javascript:;"><img class="img-responsive" src="data: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是属性不可见。