码迷,mamicode.com
首页 > 其他好文 > 详细

图片轮播组件实现

时间:2020-01-17 00:15:56      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:两种   hub   shel   scale   组件   blog   一个   细节   use   

为什么要自己实现

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

  • 性能
  • 定制化

一个是网上的组件良莠不齐,在pc跑跑还可以,到了移动端,各种卡。
另外一个原因,是因为有诸多定制化的交互要实现,所以还是自力更生,丰衣足食!

举两个栗子

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

  • 方案一
    技术图片
  • 方案二
    技术图片

方案一在轮播至边界时,需要从这一端快速滑动至另外一端,体验不佳;
方案二对边界轮播做了优化,但还是略显不足;

原创方案

接下来看看相关的示意图!
技术图片

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

原创demo

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

base模式
scale模式
parallel模式

github项目

更多细节和源码,请:点击访问

图片轮播组件实现

标签:两种   hub   shel   scale   组件   blog   一个   细节   use   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12203546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!