当前位置: 首页 > Web前端 > HTML5

图片轮播组件实现

时间:2023-04-05 17:09:22 HTML5

为什么要自己实现图片轮播?这其实是一个烂大街的功能,随处可见;网上有很多现成的组件,为什么还要自己实现呢?性能定制有两个主要原因。一种是网上的组件混杂,在PC上也能跑。在移动端,使用各种卡片。还有一个原因是因为有很多自定义的交互要实现,所以还是自食其果!举两个栗子,自己写代码之前,先看看别人的组件。俗话说:不看白不看。以下是网上常见的两种轮播方案。方案一方案二当轮播到达边界时,需要快速从一端滑到另一端。体验不好。方案二优化了边框轮播,但还是略有不足;原计划,一起来看看相关的示意图吧!容器使用虚线框,因为本方案的ul不需要设置宽高。容器ul和元素li都使用了translate3d和相关属性,从而更好的利用硬件加速边界处理:只移动一个元素实现循环,更划算原demo只处理移动事件(touch系列),所以要体验完整的功能,请使用手机浏览器打开下面的例子。basemodescalemodeparallelmodegithub项目更多详情及源码请:点击访问