开发者学堂课程【移动 Web 前端开发：zepto-使用（轮播图） 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8504
zepto-使用（轮播图）
内容介绍
一、zepto 完成轮播图分析
二、案例：zepto 完成轮播图
三、代码整理
一、zepto 完成轮播图分析
1、目的分析
使用 zepto 常见的库来完成轮播图，首先新建 zepto 目录，将下载的 zepto.min.js核心文件拷入，在 index.html 中通过 src 引入 assets 里的 zepto 中的 zepto.js 核心文件，这样就可以使用 zepto 库了，方法和 jQuery 一样，就相当于引入的是jQuery 只是名字改变叫 zepto。
zepto 和 jQuery 一样的使用方法，一样的 API，只是抛弃了一些兼容性问题，有些 API 可能没有而已。
定义 function 为入口函数，轮播图所需满足功能无缝轮播，点对应改变，手势切换，这里没有要求滑动功能，因为 zepto 没有完成滑动操作，他只完成手势操作，如左滑动右滑动，轻触也可以认为是手势。以上就是需要实现功能，后面进行分块实现。
2、前期准备
实现无缝轮播前要获取需要操作的元素，对应 html 结构中找到轮播图 sn_banner，这个容器时必要的。
然后要使用 zepto，与使用 jQuery 时一样，声明变量 $baner 获取选择器sn_banner。
获取图片容器，定义变量 $image，通过 $banner 去找到第一个图片，如果第一张图片用’ul：first’去获取，此时刷新页面在浏览器运行时会提示报错，为不是一个有效的选择器，因为是 jQuery 当中支持此方法，而 zepto 当中也是支持，但是有一个前提是必须拥有 selector 模块，在之前下载的 zepto.min.js 核心文件中只有默认的 core，ajax，event，form，IE 模块，selector 模块则是另外的没有包括在核心文件里面，
如果要使用扩展性的选择器，就要找到 selector 模块，所以要使用 selector 模块的扩展性选择器功能就要去取。在下载的 zepto.min.js 文件中没有 selector 模块，需要再次打开 zepto.js 的中文版网站，找到其他下载方式选择，grab the latest version on GitHub，打开链接会进入到存放在 GitHub 的源码分享平台上的代码，从这里可以下载到所有模块的代码。
源码下载地址：http：//github.com/madrobby/zepto。
下载后在 src 目录中找到 selector 模块，放入 webstrom 中 zepto 目录，再在html 中 src 引入模块 selector.js，回到苏宁网页刷新页面，错误消失，说明获取成功。
要想具体查看到底有没有获取成功，可以将代码 .find(‘ul:first’) 拿到网页后台中执行，但是要先通过$（’.sn_banner’）拿到苏宁下面的 banner，如果有打印结果则说明执行成功，如：
>$(’.sn_banner’).find(‘ul:first’)
<[
]
…
成功获取到第一个ul。
所以如果要使用扩展性选择器，就要加上模块 selector.js。同理再定义变量点盒子$point，通过 $banner 找到第二个 ul，使用扩展性选择器(’ul:eq(1)’)，定义所有的点 $points，找到所有的 li，index.html 代码如下：
$(function(){/*大容器*/
var $banner = $(' .sn_banner');
/*图片容器*/
var $image = $banner . find('ul:first');
/*点盒子*/
var $point = $banner. find( 'ul:eq(1)');
/*所有的点*/
var $points = $point .find('li');
}}；
以上就获取了全部所需元素，下面开始实现无缝轮播。
二、案例：zepto 完成轮播图
1、无缝轮播
第一要获取当前索引信息，当前索引值为0，因为网页中背景图并没有开始切换，ul轮播图首尾各加了一张图片，首部加的第8张，尾部加的第1张，所以没有做切换的时候看见的是第8张，但是程序要正常运行的话索引值应该为 1，所以应该到modle.less 中更改，进入 modle.less 中找到 ul 加入 transform 动画，translateX沿着 X 轴 移动自身的-100%/10，再做一个webkit的兼容。写完后刷新页面会看到另外一张图。
model.less 代码块：
…
ul{
list-style:none;
transform：translateX(-100%/10)；
-webkit- transform：translateX(-100%/10)；
}
index.html代码块为：
…
var index=1；
…
此时索引值为1，展示图片为第一张轮播图。
然后再定义一个计时器 setInterval，index 做自加1，使得每间隔一秒钟转动一次，而要让图片动画的转起来需要给 image 加参数，这里有4个参数，需要改变动画的属性 (对象)，动画执行的时间，动画执行的速度，动画执行完成回调。
写入动画执行时间为2秒，动画执行速度为 linear 匀速，然后定义 function 进行回调。而需要改变动画的属性是 transform，transform 改变值可以根据轮播图尺寸来计算，所以定义轮播图宽度等于 $banner 的宽度，translateX 中应该拼接-index*width，比如轮播图宽度为750，一张图片默认移动一张图位置为-750，假设这个时候要移到第二张，就又要移动一张的距离就是移动两张，现在第二张图索引是3，刚刚第一张图索引为2，第一张图移动距离应该是1×当前设备宽度为-750，第二张图移动距离应该是2×当前设备宽度为-1500。此时刷新网页页面轮播图状态应该动起来，但是实际却报错，提示没有模块。还需要拷入 fx.js 模块，在本地 zepto 下载中找到模块，导入到 zepto 目录下，index.html 中再进行引入。刷新网页面查看，此时轮播图的轮播动画功能实现成功。
所以当使用 zepto 去实现一些功能的时候，要注意默认模块中有没有所需模块，如果没有就要下载引入。对于一些经常要使用的js模块，可以合并到一个 js 文件中。
…
…
/*动画方法*/
var animateFuc = function(){
$image.animate({'transform':'translateX('+(-index*width)+'px)'}, 200, ' linear' ,function( )
…
但是刷新页面运行，轮播图完成后会出现空白页，所以应该在动画结束后判断，当滚动最后一张图片后要进行判断 index 是否大于等于 9，如果是则要快速回到第一张图片，不用再使用 image.animate，直接用 CSS 改变属性就可以，所以这里使用$image.css，如果将 image.animate 中执行动画传到 $image.css 中就会被瞬间执行，瞬间执行也是按照index去计算宽度，这个时候-750就是原始的位置，通过 CSS 瞬间定位过去。
除了这种情况还有 index 可能小于等于0，当小于等于0的时候 index 切回到第8张图片。除了这两种情况后就是正常轮播的，此时 index 值为1-8。
/*判断索引*/
/*无缝滚动*/
if(index >= 9){
index=1;
/*瞬间*/
$image.css({'transform' :'translateX(' +(- index*width)+' px)'});
}else if(index <= 0){
index = 8;
$image . css({' transform' : 'translateX('+(- index*width)+'px)'});
}
以上成功实现动画无缝轮播。
2、点对应改变
现在 index 对应的是1-8，则点对应的就是0-7，首先 points 拿到所有的点，拿到后要清除上面的 now，因为 $points 是一个集合，所以不管 now 在哪里都会被清理掉。
全部清掉后通过 eq 找到当前对应的点为 index-1，再加上 now 的样式就做到了点的对于改变了。代码如下：
…
/*2.点对应改变*/
$points . removeClass( ' now' ) .eq( index- 1) . addClass(' now');
…
当图片改变时，指示器点也对于改变，第二张轮播图效果如图：
3.手势切换
需要导入 touch.js，在 index 中引入 touch.js 模块，模块作用是提供手势事件。
在 touch.js 中最后面的源码可实现的事件有 swipe 滑动，swipeLeft 向左滑动，swipeRight 向右滑动，swipeUp 向上滑动，swipeDown 向下滑动，double 双击，tap 触屏，singleTap 单击，longTap 长 按。这里要使用到向右滑回到上一张，向左滑回到下一张。给 image 绑定一个左划 swipeRight，跟上回调方法，进行上一张 index--，再绑定一个 swipeLeft，再跟上回调方法，进行下一张index++。
不能光通过 index 进行切换，还要进行动画的切换，方法与上面的 image.animate相同，所以可以定义全局变量 var animateFuc = function()，这样每次进行相同方法时都只需要 animateFuc( ) 调用函数即可，其他的地方也使用 animateFuc( ) 函数替换掉。浏览器刷新页面，运行结果为通过手势滑动进行上一张，下一张图片切换功能实现成功，代码如下：
…
…
/*上一张右滑*/
$image .on( ' swipeRight' , function(){
index --;
/*.动画的切换*/
animateFuc( );
});
/*下一张左滑*/
$image . on(' swipeLeft ' , function(){
index ++;
animateFuc();
});
三、代码整理
整理最终代码如下：
index.html 中代码为：
……
index.js 代码段如下：
$(function(){
/*入口函数*/
/*轮播图*/
/*获取需要操作的元素*/
/*大容器*/
var $banner = $(' .sn_banner');
var width = $banner .width();
/*图片容器*/
var $image = $banner . find('ul:first');//此时是没有这个模块的，
需要回到 api 文档界面点击源码地址
https：//github.com/madrobby/zepto 中 grab the latest version on GitHub下载，找到 zepto.js 模块引入到 selector
/*点盒子*/
var $point = $banner. find( 'ul:eq(1)');
/*所有的点*/
var $points = $point .find('li');
/*动画方法*/
var animateFuc = function(){
$image.animate({'transform':'translateX('+(-index*width)+'px)'}, 200, ' linear' ,function( )
/*判断索引*/
/*无继滚动*/
if(index >= 9){
index=1;
/*瞬间*/
$image.css({'transform' :'translateX(' +(- index*width)+' px)'});
}else if(index <= 0){
index = 8;
$image . css({' transform' : 'translateX('+(- index*width)+'px)'});
}
/*正常 index 1-8 */
/*2.点对应改变*/
$points . removeClass( ' now' ) .eq( index- 1) . addClass(' now');
});
}
/*1.无缝轮播*/
var index = 1;
var timer = setInterval(function(){
index ++;
/*动画的转起来*/
/*4个参数需要改变动画的属性 (对象)动画执行的时间动画执行的速度动画执行完成回调*/
animateFuc();
}, 5000);
/*3.手势切换*/
/*上一张右滑*/
$image .on( ' swipeRight' , function(){
index --;
/*.动画的切换*/
animateFuc( );
});
/*下一张左滑*/
$image . on(' swipeLeft ' , function(){
index ++;
animateFuc();
});
});
model.less代码块：
…
ul{
list-style:none;
transform：translateX(-100%/10)；
-webkit- transform：translateX(-100%/10)；
}
