属性总结笔记如下：
<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='/images/loading.gif' data-original="'+data["data"][i]["picUrl"]+'" 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 ="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/loading.gif' data-original="images/1.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src='/images/loading.gif' data-original="images/2.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src='/images/loading.gif' data-original="images/3.jpg"/></a></div> </div> </div>
// <ul id="position"> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul></div><script src='/images/loading.gif' data-original="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 2.0 轻量级框架实现mobile web 左右滑动
关键词：JS
我知道了 