20200320js学习笔记

一、今天学习轮播图的案例，轮播图效果实现的核心思路如下：

1. 当鼠标移动到轮播图上，左右按钮显示，鼠标离开左右按钮消失，这个用到了鼠标移入（mouseenter）和鼠标移出（mouseleave）事件
2. 小圆圈和图片一致显示，有几张图片就显示几个小圆圈在下面，可以这样做，先获取图片列表里有几张图片，利用for循环自动生成相应数量的小圆圈即可
3. 点击小圆圈切换到相应图片，可以在生成小圆圈的时候，同时给它设置自定义属性索引号，当点击某个小圆圈的时候，把它的索引号获取过来，用它的索引号乘以图片的宽度即可切换到相应图片，当然此时要引入动画函数完成效果
4. 给右按钮点击事件，点击一次滑动一张图片，可以先声明一个num，点击一次右按钮它的值就加一。要实现图片的无缝滚动，就要复制第一张图片到最后一张图片后面，然后当num的值取到图片的数量-1的时候让ul的left值等于0，同时num重新赋值为0，就可以实现无缝滚动了
5. 点击右侧按钮小圆圈跟随变化，首先也声明一个变量circleNum赋值为0，当点击一次右侧按钮，它的值就加一，到值增加到图片的数量-1的时候，重新设置为0，如果此时再点击小圆圈，再点击右侧按钮，就可以会混乱了，这个时候把图片点击时的索引号赋值给num和circleNum就行了
6. 左侧按钮点击的时候，num和circleNum值要自减，当num的值为0 时，如果还点击左侧，此时应该把num的值设置成相应的图片数量 -1，ul的left值设置成num乘以图片宽度，当circle的值小于0 时，当前的小圆圈应该改成第四个小圆圈
7. 自动播放轮播图效果，当鼠标移入的时候，停止自动播放，关闭定时器，当鼠标移除时，自动播放轮播图，此时相当于点击了右侧按钮，此时可以使用一个定时器，里面使用右侧按钮对象.click()方式手动调动点击事件

二、移动端的触屏事件

触屏事件touch	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指在一个DOM元素上移开时触发

---

触摸事件对象

触摸列表	说明
touches	正在触摸所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生改变的列表，从无到有，从有到无变化