轮播图也涉及到触摸和触摸反馈，同时，AlloyTouch 可以把惯性运动打开或者关闭，并且设置 min 和 max 为运动区域，超出会自动回弹。
除了一般的竖向滚动，AlloyTouch 也可以支持横向滚动，甚至任何属性的运动，因为它的设计的本质就是属性无关，触摸可以反馈到任何属性的运动。所以 AlloyTouch 制作各种各样的轮播组件还是得心应手。
第一种轮播图如上图所示。下面开始实现的过程。
第 0 秒
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="carousel-container"> <div class="carousel"> <div class="carousel-scroller" id="carousel-scroller"> <img style="width: 88%;" src="asset/ci1.jpg"> <img style="width: 88%;" src="asset/ci2.jpg"> <img style="width: 88%;" src="asset/ci3.jpg"> <img style="width: 88%;" src="asset/ci4.jpg"> <img style="width: 88%;" src="asset/ci5.jpg"> </div> </div> </div> |
一共五张图，每张图占有屏幕比例的百分之 88，所以用户的屏幕里可以看到一张多一点的图片，给用户可以横向滑动查看的感觉。
第 10 秒
|
1 2 3 4 5 6 |
<script src="../transformjs/transform.js"></script> <script src="../alloy_touch.js"></script> <script> var scroller = document.querySelector("#carousel-scroller"); Transform(scroller); </script> |
通过 Transform(scroller); 注入 CSS3 transform 属性。
第 20 秒
|
1 2 3 4 5 6 7 8 |
new AlloyTouch({ touch: "#carousel-container",//反馈触摸的dom vertical: false,// 监听用户横向触摸 target: scroller, //运动的对象 property: "translateX", //被运动的属性 min:0.88 * window.innerWidth * -5 + window.innerWidth, max: 0 }) |
这里最大的难点（其实也没有什么难的），就是就是 min 的值。因为初始值是 0，所有向左边滑动一定是负值。可以得到 max 一定是 0。
那么 min 的值就是： 屏幕的宽度－图片的张数*图片的宽度
- 图片的宽度为 0.88 * window.innerWidth
- 屏幕的宽度为 window.innerWidth
- 图片的张数为 5
第 30 秒
如上图所示，相对于传统的 swipe 然后再去触发滚动，上面的跟手然后再去校正的体验是更加良好的。那么怎么实现呢？
首先，AlloyTouch 是支持 step 配置。
|
1 2 3 4 5 6 |
new AlloyTouch({ step: 100， ... ... ... }) |