博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片轮播组件实现
阅读量:5916 次
发布时间:2019-06-19

本文共 500 字,大约阅读时间需要 1 分钟。

为什么要自己实现

图片轮播,这其实已经是一个烂大街的功能,到处可见;网上也有很多现成的组件,那为什么还要自己来实现呢?主要的原因有两个

  • 性能
  • 定制化

一个是网上的组件良莠不齐,在pc跑跑还可以,到了移动端,各种卡。

另外一个原因,是因为有诸多定制化的交互要实现,所以还是自力更生,丰衣足食!

举两个栗子

在自己撸代码之前,先来看看别人家的组件,正所谓:不看白不看。下面列举两种网上比较通用的轮播方案

  • 方案一

  • 方案二

方案一在轮播至边界时,需要从这一端快速滑动至另外一端,体验不佳;

方案二对边界轮播做了优化,但还是略显不足;

原创方案

接下来看看相关的示意图!

  • 容器用了虚线框,因为此方案的ul是不需要设置宽高的
  • 容器ul和元素li都使用了translate3d以及相关属性,从而更好的利用硬件加速
  • 边界处理:只移动一个元素,便可实现循环,性价比更高

原创demo

只处理了移动端事件(touch系列),所以要体验完整功能,请使用移动端浏览器打开以下实例。

github项目

更多细节和源码,请:

转载于:https://juejin.im/post/59ec148d6fb9a0451c398a43

你可能感兴趣的文章
查看帐号授权信息
查看>>
小程序(四):模板
查看>>
【转】Java - printf
查看>>
jquery获取元素到屏幕底的可视距离
查看>>
ENDNOTE使用方法(转发)
查看>>
计算机数制和运算的一点总结.
查看>>
UML系列 (五) 为什么要用UML建模之建模的重要性
查看>>
框架是什么,框架有什么用(转)
查看>>
集成测试
查看>>
对于I/O流中解压中遇到的问题
查看>>
问答项目---用户注册的那些事儿(JS验证)
查看>>
Android进阶篇-百度地图获取地理信息
查看>>
返回前一页并刷新页面方法
查看>>
2.3 InnoDB 体系架构
查看>>
不定宽高垂直居中分析
查看>>
项目管理学习笔记之二.工作分解
查看>>
C# PPT 为形状设置三维效果
查看>>
js数组实现不重复插入数据
查看>>
aidl跨进程通讯
查看>>
如何确定所运行的 SQL Server 2005 的版本?
查看>>