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，并阻止它的默认行为即可。

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

如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~