1.IScroll
1.1插件介绍
区域滚动插件，对于移动端的页面滚动效果表现不一致，和需要上拉刷新上拉加载等效果的页面，可以帮助快速的实现滚动效果。
1.2插件使用
IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：
<div id=”wrapper”> <ul> <li>…</li> <li>…</li> … </ul></div>
iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
最基本的脚本初始化的方式如下：
<script type=”text/javascript”> var myScroll = new IScroll(‘#wrapper’);</script>
第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：
var wrapper = document.getElementById(‘wrapper’);var myScroll = new IScroll(wrapper);
所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:
var myScroll = new IScroll(‘.wrapper’);
注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。
1.3参数配置
参考
http://www.mamicode.com/info-detail-331827.html
https://www.cnblogs.com/hellman/p/6046790.html
https://webscripts.softpedia.com/script/Internet-Browsers-C-C/Navigation/iScroll-67090.html
1.4总结
在移动端的上拉刷新，下拉加载，区域滑动，可使用区域滚动插件快速实现。
2.swiper
2.1介绍
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
2.2使用
首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html><html><head> … <link rel=”stylesheet” href=”path/to/swiper.min.css”></head><body> … <script src=”path/to/swiper.min.js”></script></body></html>HTML内容<div class=”swiper-container”> <div class=”swiper-wrapper”> <div class=”swiper-slide”>Slide 1</div> <div class=”swiper-slide”>Slide 2</div> <div class=”swiper-slide”>Slide 3</div> </div> <!– 如果需要分页器 –> <div class=”swiper-pagination”></div> <!– 如果需要导航按钮 –> <div class=”swiper-button-prev”></div> <div class=”swiper-button-next”></div> <!– 如果需要滚动条 –> <div class=”swiper-scrollbar”></div></div>导航等组件可以放在container之外你可能想要给Swiper定义一个大小，当然不要也行。.swiper-container { width: 600px; height: 300px;} 初始化Swiper：最好是挨着</body>标签<script> var mySwiper = new Swiper (‘.swiper-container’, { direction: ‘vertical’, loop: true, // 如果需要分页器 pagination: { el: ‘.swiper-pagination’, }, // 如果需要前进后退按钮 navigation: { nextEl: ‘.swiper-button-next’, prevEl: ‘.swiper-button-prev’, }, // 如果需要滚动条 scrollbar: { el: ‘.swiper-scrollbar’, }, }) </script></body>
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type=”text/javascript”>// 入口函数window.onload = function() { …}</script>
或者这样（Jquery和Zepto）
<script type=”text/javascript”>$(document).ready(function () { …})</script>
总结
移动端轮播图需求使用swiper来解决是一个好的选择。
