属性总结笔记如下：
<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; 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; 100%;position:relative;}
//position:absolute;表示绝对定位，把它固定到你想要固定到的位置。当使用绝对定位的时候，后面跟的是定位的具体位置参数。如bottom：0.它表示把图像的底边缘设置在其包含元素底边缘之上5像素高的位置。
//表示位置属性的单位都是像素px。background:#000;表示颜色为黑色。
//opacity: 0.4; 用于设置标签元素的不透明级别。0.0表示完全透明；1.0表示完全不透明。
//同样的，CSS3中100%;表示的就是自适应宽度。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; 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{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- 100%; 最大宽度属性，用来定义宽度显示的最大值 .img-responsive { display: block; max- 100%; height: auto;}
接下来需要熟练使用Chrome的F12调试器来来按照参考demo的swipe.js对原本页面进行调试，达到一样的页面布局和样式效果。下面是自己自学的总结笔记如下：
修改bug的模式是什么？一个一个的修改，然后再到浏览器去一次又一次的刷新？但随着经验的增长，自己也感觉这样修改的模式是烦人的、效率低下的，那有没有一种方式是可以快速修改，所见所得，回答是有的！
Chrome
总结如下：
1，overflow：hidden与visibility：hidden属性比较：overflow：hidden是隐藏溢出，清楚浮动；visibility：hidden是属性不可见。