前言
一句话需求
移动端实现一个轮播器，在轮播器上层有一个静止图层，不会随着轮播器翻页而偏移。
以下是两个已经实践的两个项目：
[Github]，欢迎各方Gay Man来Fork与Star！！！
需求分析
以上需求可以拆分成两个小的需求：
- 实现一个轮播器；
- 做个静止图层。
问题
轮播器作为一个图层，静止图层是一个。
那么那个图层在上，那个在下？
- 轮播器在上，则静止图层被轮播器遮盖；
- 静止图层在上，则绑定在轮播器上的手势事件由于被静止图层在上而无法触发。
再细分需求
为了显示静止图层，那么静止图层一定是要在上的。那么就必须解决第2个问题，怎么触发轮播器的手势。
我们可以通过监听静止图层或者两图层容器的手势，然后映射到轮播器。
实现
1 实现一个轮播器
由于网上的轮播器插件的都是封装好的，触发事件比较麻烦，因此选择自己使用原生js实现一个。
实现轮播器的方案有很多中，比如改变translate属性的，也有先实现一个scroll-view，然后改变scroll-view的scrollLeft。我选用后者（单纯是因为我没有这样做过，而且好像很有趣）。
那么就先实现一个scroll-view。
一般scroll-view都是纵向的，根据以上需求，我们就需要实现一个横向的scroll-view，具体实现如下
<div id="app">
<dl class="story">
<dt></dt><dt></dt>
<dt></dt><dt></dt><dt></dt>
<dt></dt><dt></dt>
</dl>
</div>
*{ margin: 0;padding: 0; }
html,body{ height: 100%; }
::-webkit-scrollbar{ display: none; }
#app{ height: 100%;position: relative; }
#app > .story{ position: absolute;top: 0;right: 0;bottom: 0;left: 0; }
#app > .story{
z-index: 1000; border: 1px solid;
overflow-x: auto;overflow-y: hidden; white-space: nowrap;font-size: 0;letter-spacing: 0;
/* translateZ是是为了开启硬件加速 */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.story > dt{ height: 100%;width: 100%;display: inline-block;vertical-align: top;position: relative; }
.story > dt:nth-of-type(1){ background-color: red; }
.story > dt:nth-of-type(2){ background-color: orange; }
.story > dt:nth-of-type(3){ background-color: yellow; }
.story > dt:nth-of-type(4){ background-color: green; }
.story > dt:nth-of-type(5){ background-color: cyan; }
.story > dt:nth-of-type(6){ background-color: blue; }
.story > dt:nth-of-type(7){ background-color: purple; }
核心css为
overflow-x: auto;overflow-y: hidden; white-space: nowrap;
禁用块级元素的换行，依次达到横排的效果。
[查看源码：jsbin]
[查看源码：jsfiddle]
(ps：要看效果的gay man请点击[查看源码：jsbin]，并使用移动设备模式查看， 下同)
2 实现静止图层并监听其上的手势
先向#app中添加静止图层
<div id="app">
<dl class="mash">
<img src="http://ohi69gup6.bkt.clouddn.com/005TGG6vly1fes9jc0kk0g30b40b40tv.gif">
</dl>
...
</div>
然后，来分析一下轮播器的功能
- 向左，向右滑动翻页；
- 轮播器卡片手势跟随。
第1点的实现思路
获取手指 “触碰屏幕那刻” 和 “离开屏幕那刻” 的位置，根据以上两个位置判断翻页方向，要获取这两位置，就需要分别注册touchstart和touchend事件，通过事件的回调参数( event )获取。
// 触碰屏幕那刻横向位置
var touchStartX = e.changedTouches[0].pageX;
// 离开屏幕那刻横向位置
var touchEndX = e.changedTouches[0].pageX;
判断滑动方向
var isNext = touchEndX - touchStartX < 0;
知道翻页方向就可以进行翻页
翻页如上文所说，通过改变卡片容器的scrollLeft。这里的容器是#app > .story。
document.querySelector("#app > .story").scrollLeft
想要实现翻页，还必须知道两个属性：
- 每页宽度：可以通过
story.clientWidth获取； - 当前页：使用全局变量记录当前是第几页。
具体实现如下：
var touchStartX = 0;
var currentPage = 1;
var mash = document.querySelector("#app > .mash");
var story = document.querySelector("#app > .story");
var screenWidth = story.clientWidth;
mash && mash.addEventListener('touchstart', function(e){
var touch = e.changedTouches[0];
touchStartX = touch.pageX;
}, false);
mash && mash.addEventListener('touchend', function(e){
var touch = e.changedTouches[0];
var touchEndX = touch.pageX;
var isNext = touchEndX - touchStartX < 0;
var oldCurrentPage = currentPage;
var maxPage = story.children.length;
var minPage = 1;
currentPage = isNext ? currentPage + 1 : currentPage - 1;
currentPage = currentPage > maxPage ? maxPage : currentPage;
currentPage = currentPage < minPage ? minPage : currentPage;
var targetScrollLeft = (currentPage - 1) * screenWidth;
story.scrollLeft = targetScrollLeft;
}, false);
以上代码基本实现翻页，但是仅仅是通过每次 “增加/减少 一个screenWidth的距离” 达到翻页的目的，是不够的，因为你会发现翻页效果很生硬的，仅仅只有一帧。
下面让我们把翻页效果做得更加顺滑。
怎么做，使用定时器(setTimeout)？
不！不！不！当然不会！
我们使用requestAnimationFrame，至于为什么使用requestAnimationFrame而不使用setTimeout？请自行Google。接着，让我们先实现一个动画函数
function animate(callback) {
var _animate = function(){
var isValid = callback && callback();
isValid && requestAnimationFrame(_animate);
};
requestAnimationFrame(_animate);
}
ok，然后要做的就是将它运用到翻页的代码中
// 设置每帧改变scrollLeft距离
var step = 30;
// ...
mash && mash.addEventListener('touchend', function(e){
// ...
animate(function() {
var scrollLeft = story.scrollLeft;
scrollLeft = isNext ? scrollLeft + step : scrollLeft - step;
if(isNext && scrollLeft > targetScrollLeft) {
story.scrollLeft = targetScrollLeft;
return false;
} else if(!isNext && scrollLeft < targetScrollLeft){
story.scrollLeft = targetScrollLeft;
return false;
} else {
story.scrollLeft = scrollLeft;
return true;
}
});
}, false);
第2点的实现思路
第二点需要实现的功能是：轮播器卡片手势跟随。
假如你有试过以上代码实现的轮播器，你会发现一个问题：手指在未离开屏幕前，无论手指怎么滑动都不会有任何响应，这明显不是我们想要的。标准的轮播器应该是：当前卡片应该对手势做出响应，卡片跟随手指移动。
要实现以上效果，就需要监听手指未离开屏幕的前的动作，注册touchmove事件，获取手指每次移动的位置！
mash && mash.addEventListener('touchmove', function(e){
var touch = e.changedTouches[0];
var moveingfPageX = touch.pageX;
var distance = -(moveingfPageX - touchStartX);
var currentPageScrollLeft = (currentPage - 1) * screenWidth;
story.scrollLeft = currentPageScrollLeft + distance;
}, false);
思路也是比较简单的，监听手指所在位置与初始位置touchStartX的距离，然后动态地改变story.scrollLeft。
另外，现在已经实现卡片的手势跟随，随之又可能有这么一种情况：
用户已经滑动卡片，但是在滑动后用户不想翻页了，转而想继续留在当前页，即 “后悔功能”。然后再看看当前我们的逻辑：
// ...
var isNext = touchEndX - touchStartX < 0;
// ...
currentPage = isNext ? currentPage + 1 : currentPage - 1;
currentPage = currentPage > maxPage ? maxPage : currentPage;
currentPage = currentPage < minPage ? minPage : currentPage;
以上逻辑是：如果不是上一页就是下一页。并没有实现后悔功能。
为实现后悔功能，我做如下修改
// 设置最小有效翻页距离（在手指离开屏幕时所偏移的横向距离），换言之，偏移距离小于30就触发后悔功能
var validFlipDistance = 30;
// ...
mash && mash.addEventListener('touchend', function(e){
// ...
var isValid = Math.abs(touchEndX - touchStartX) >= validFlipDistance;
// ...
if(isValid) {
currentPage = isNext ? currentPage + 1 : currentPage - 1;
currentPage = currentPage > maxPage ? maxPage : currentPage;
currentPage = currentPage < minPage ? minPage : currentPage;
} else {
// 触发后悔功能，改变滑动方向，由animate函数将卡片反向滑回初始位置
isNext = !isNext;
}
});
[查看源码: jsbin]
[查看源码: jsfiddle]
写在最后
我知道自己的实现并不是最佳实践，但是我想说的是：造轮子真爽！
