一分钟搞定AlloyTouch图片轮播

 

 

轮播图也涉及到触摸和触摸反馈，同时，AlloyTouch能够把惯性运动打开或者关闭，而且设置min和max为运动区域，超出会自动回弹。 除了通常的竖向滚动，AlloyTouch也能够支持横向滚动，甚至任何属性的运动，由于它的设计的本质就是属性无关，触摸能够反馈到任何属性的运动。因此AlloyTouch制做各类各样的轮播组件仍是驾轻就熟。

第一种轮播图如上图所示。下面开始实现的过程。

第0秒

<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秒

<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秒

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配置。

new AlloyTouch({ step: 100， ... ... ... })

只要用户设置的step，最后运动结束以后，AlloyTouch都会帮用户校订到最接近的step的整数倍的位置。 好比上面是100：

• 若是运动的对象停在 120，会被校订到100
• 若是运动的对象停在 151，会被校订到200
• 若是运动的对象停在 281，会被校订到300
• 若是运动的对象停在 21，会被校订到0

第40秒

固然这有个问题，好比用户从0滑倒30，其实他是想去100，可是会被校订到0!!! 因此光使用校订是不够。还须要一个API去阻止校订本身去注入逻辑滚动相应的位置。因此你必须支持AlloyTouch的：

to 方法

to(v [, time, easing]) 

其中time和easing不是必须。time的默认值是600.

第50秒

var items = document.querySelectorAll("#nav a"); var scroller = document.querySelector("#carousel-scroller"); Transform(scroller); new AlloyTouch({ touch: "#carousel-container",//反馈触摸的dom vertical: false,//没必要需，默认是true表明监听竖直方向touch target: scroller, //运动的对象 property: "translateX", //被运动的属性 min: window.innerWidth * -3, //没必要需,运动属性的最小值 max: 0, //没必要需,滚动属性的最大值 step: window.innerWidth, inertia: false, //没必要需,是否有惯性。默认是true touchEnd: function (evt, v, index) { var step_v = index * this.step * -1; var dx = v - step_v; if (v < this.min) { this.to(this.min); } else if (v > this.max) { this.to(this.max); } else if (Math.abs(dx) < 30) { this.to(step_v); } else if (dx > 0) { this.to(step_v + this.step); } else { this.to(step_v - this.step); } return false; }, animationEnd: function (evt , v) { var i = 0, len = items.length; for (; i < len; i++) { if (i === this.currentPage) { items[i].classList.add("active"); } else { items[i].classList.remove("active"); } } } })

由于一共四张图，因此 min获得的结果是 window.innerWidth * -3 max的值依然是0 step的值是 window.innerWidth 经过设置 inertia: false,把惯性运动关掉 注意看touchEnd里面的return false是为了避免去计算手指离开屏幕后的校订位置、惯性运动等逻辑。 touchEnd能够拿到当前的位置v以及当前所处的位置index。 animationEnd是运动结束后的回调，用来设置nav的active。固然不是全部浏览器都支持classList，这里只是为了演示代码足够简洁。 再注意，在touchEnd和animationEnd中能拿到this，也就是AlloyTouch当前对象的实例。其中， to方法用来运动当前对象 step是当前的步长 还能够拿到currentPage去获取当前所处的页码 还能拿到min和max值，获得运动的区间。

最后

全部例子演示和代码能够在Github上找到。 Github：https://github.com/AlloyTeam/AlloyTouch 本文转载自：http://www.cnblogs.com/iamzhanglei/p/6149063.html