JS+CSS实现轮播图

项目地址:https://github.com/owenliang/carousel

演示地址:https://owenliang.github.io/carousel/

  • 做轮播图主要的复杂度还是在于手势触摸事件的正确处理,再就是transition和transform的应用。
  • 其次是基础CSS,这个项目中利用inline-block居中页码,利用vertical-align和text-align对其进行水平/垂直的对齐。
  • 有的浏览器对触屏事件有默认处理,比如百度浏览器向左滑就会后退,向右滑就会拖拽整个页面,为了防止这些浏览器订制行为的发生,需要禁止浏览器的默认行为:
    • 首先明确,你触摸在某个元素上产生了event,该event属于该发生事件元素(称为target元素),event会继续向父元素向上冒泡,路径上的所有元素均可以监听event进行进行处理。
    • 其次,event的默认行为是针对target而言的,冒泡所至的元素是不会执行默认行为的,只有target元素会执行浏览器默认行为。
    • 最后,冒泡所至的任意父级元素监听回调得到的event对象,仍旧是target所发出的那个event对象,因此event.preventDefault()是阻止target元素的默认行为。
    • 因此,我的做法是在轮播区域的最外层容器div上调用event.preventDefault()阻止target的默认行为,这样就解决了个别浏览器对触摸操作的默认行为(例如拖拽页面)了,你也可以这样理解:个别浏览器对所有元素的touch事件都有一个默认行为,就是拖拽页面,因此只需要在它自身或者父级监听到这个event,并阻止它的默认行为即可。

关于移动端触摸事件的正确编程方式,可以参考这篇博客

发表评论

电子邮件地址不会被公开。