前端HTML5高级工程师如何实现移动端轮播图-今日头条

随着移动设备越来来越多，所以公司对移动设备上的网站也越来越重视，也就使得前端人员要具备可以开发移动端的项目，而移动端的项目又没有什么主要的效果，只有一个滑动轮播图是一个主要的效果，可想而知移动端的滑动轮播图是多么的重要，本套课程我将带领大家探究原生的滑动轮播图奥秘！

学习步骤：

一、简单的轮播制作

二、touchstart事件的应用

三、touchmove事件的应用

四、touchend事件应用

禁止页面缩放：为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

(注：这个也是写移动端必备的语句)

在学习其他方法的时候我们要先认识一下addEventListener。

addEventListener()方法用于向元素添加事件，语法：event.addEventListener(“ 事件名 ”执行事件后要执行的函数,布尔值);

（注：前两个是必需写的第三个是选填的，默认是false)

touchstart：是手指按下事件也就是当我们的手与屏幕刚刚接触的那一刹那触发的事件

changedTouches ：涉及当前事件的手指的一个列表。也就是说我这个事件有几个手指触发

clientX：获取当前的手指所在元素的X轴坐标 clientY：获取当前的手指所在元素的Y轴坐标一般clientX与changedTouches[0]连用表示第一个手指所在的X轴坐标 event.changedTouches[0].clientX

touchmove：是手指在屏幕上滑动时触发的事件

给元素添加touchmove事件： event.addEventListener('touchmove',move); function move(){

要执行的函数；

}

touchend：指的是当手指离开屏幕时触发的事件

用法和touchmove是一样的

本文章视频链接地址：http://blog.sina.com.cn/s/blog_1671244030102wxpm.html

更多精彩内容请关注 ---- 微信公众号：houdunit

看完不要跑记得出来吐吐槽！╰(￣▽￣)╮

前端HTML5高级工程师如何实现移动端轮播图