相信大家应该都知道,移动端的轮播图是我们比较常见的需求,我们最快的实现方式往往是使用第三方的代码,例如偷窃者,但当遇到一些比较复杂的轮播图需求时,往往是束手无策,不知道怎么改只,,,,,
所以我们要尝试去自己造一些轮子,以适应各种复杂多变的需求,,另外一点,自己写的代码如果有虫子是很容易修复的,对自身的提高也很大。
在没有阅读偷窃者源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图,经过几个小时的思考和实践终于还是实现了(如图):
,,,,1 .轮播图要适应不同宽度/dpr的屏幕,
,,,,2.需要使用触摸相关的事件,
,,,,3.不同机型对触摸事件支持的不太一样,可能会有一些兼容性问题,
,,,,4 .手指移动图片一部分距离,剩下的距离需要自动完成,
,,,,5.自动完成距离需要有缓解时间曲线,
但编程解决问题的思路都是差不多的,
<李>我们在使用轮播图的时候可以仔细观察,通过现象看到本质:,李
<李>手指放在图片上,手指向左或者向右移动,图片也随之移动;,李
<李>手指移动的距离少时,图片自动复原位置;手指移动的距离多时,自动切换到下一张;,李
<李>手指向左或者向右移动的快时,会切换到下一张;,李
<李>图片轮播是无限循环的,我们需要采用,3 1 2 3 1的方式来实现,即N + 2张图来实现N张图的无限循环轮播,李
,,,,1. 手指触摸事件可以通过touchstart touchmove touchend 3个事件来实现,
,,,,2.在手指touchstart的时候我们需要记录手指的x坐标,,可以使用触摸的pageX属性;还有这个时间点,,
,,,,3.手指touchmove的时候我们也需要记录pageX,并且记录累计移动的距离moveX
,,,,4.手指离开的时候,记录时间点,根据前两步计算的x方向移动的距离,时间点之差,
,,,,5.通过比较x方向移动距离来判断移动方向,以及是否应该切换到下一张图;根据时间判断用户是否进行了左右扫动的操作,
,,,,6.移动图片可以使用translate3d来实现,开启硬件加速,
,,,,7.移动一段距离需要easeOut效果,我们可以使用渐变算法中的easeOut来实现我们每次移动的距离;当然也可以使用js设置过渡动画,
<强>头头部样式
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=5,最大范围=5”比;
& lt; title>移动端轮播图& lt;/title>
& lt; style>
* {
box-sizing: border-box;
保证金:0;
填充:0
}
.banner {
溢出:隐藏;
宽度:100%;
身高:300像素
}
.banner .img-wrap {
位置:相对;
高度:100%
}
.banner img {
显示:块;
位置:绝对的;
上图:0;
宽度:100%;
高度:100%
}
& lt;/style>
& lt;/head>之前
<强> HTML结构
& lt; div类=昂岱北?
& lt; div类=" img-wrap " id=癷mgWrap”比;
& lt; img src=" https://www.yisu.com/zixun/images/banner_3.jpg "材料指数=?”比;
& lt; img src=" https://www.yisu.com/zixun/images/banner_1.jpg "材料指数=" 0 "比;
& lt; img src=" https://www.yisu.com/zixun/images/banner_2.jpg "材料指数=?”比;
& lt; img src=" https://www.yisu.com/zixun/images/banner_3.jpg "材料指数=?”比;
& lt; img src=" https://www.yisu.com/zixun/images/banner_1.jpg "材料指数=?”比;
& lt;/div>
& lt;/div>之前
JS代码1,easeOut动画式移动,
这里的,,HTMLElement.prototype。tweenTranslateXAnimate,是给所有的HTML元素类扩展的tweenTranslateXAnimate方法
移动一段距离我们需要使用定时器来帮助我们完成,这个重复的操作
& lt; script>
HTMLElement.prototype。tweenTranslateXAnimate=函数(开始、结束回调){
var时间=50;
var t=0;
var vv=结束-开始;
var渐变={
四:{
easeOut:函数(t, b, c, d) {
返回- c * (t/d=) * (t - 2) + b;
}
}
};
这一点。计时器=setInterval(函数(){
var说=+ Tween.Quad开始。easeOut (+ + t, 0, vv,持续时间);
this.style。变换=' translate3d(' +说+ ' px, 0, 0) ';
如果(在0,,方法(this.style.transform.slice(12))在=){
this.style。变换=' translate3d(' +方法(dis) +“px, 0, 0) ';
clearInterval (this.timer);
回调,,回调();
}
如果(vv & lt;0,,方法(this.style.transform.slice (12)) & lt;=结束){
this.style。变换=' translate3d(' +方法(dis) +“px, 0, 0) ';
clearInterval (this.timer);
回调,,回调();
}
}.bind(这),4);
}
& lt;/script>
