轮播图改进

轮播图改进

• 对循环效果进行改进

  • 结构的改进：需要在ul内最后设置一个假的第一张图

    • 克隆节点操作

      • 格式： 节点.cloneNode()

      • 参数：默认false 浅克隆

        ​ true，深克隆

    • 因为ul在样式中设置了宽度，需要修改为700%

  • 操作的改进：当假的第一张显示时，再次点击右按钮，立刻将ul抽回到第一张显示的位置，再继续滚动

• 左按钮的操作与右按钮同理

移动端事件

• 移动端事件同一使用addEventListener()
• touchstart 手指刚触摸到屏幕时触发的事件
• touchmove 手指在屏幕上移动时触发（不能松手）
• touchend 手指离开屏幕时触发

手指的信息获取方式

• 在touch相关事件中，先获取事件对象event
• event中具有三个属性，用来获取手指信息
  • touches 获取屏幕上的所有手指信息
  • targetTouches 某个元素上的手指信息
  • changeTouches 状态改变的手指信息
• 推荐使用的方式：
  • touchstart： 推荐使用touches或者targetTouches
    • 平常都用touches
    • 如果发现效果只能被某个执行元素操作，就用targetTouches
  • touchmove和touchend： 推荐使用changedTouches
  • 注意：不要直接写 e.clientX
    • 要写成 e.touches[0].clientX

移动端的手势

• 手势不是移动端原生提供的功能
• DOM中没有直接提供手势的功能，需要多个事件配合进行实现
• 每个手势的实现都较为繁琐

zepto

swiper

来源：https://www.cnblogs.com/itxcr/p/11600056.html