文享日志

几款原生轮播图

JavaScript HTML

发表于2018年02月27日11:00:28

更新于2018年02月28日23:56:15

0条评论 215次阅读

  花了点时间,写了个轮播图。毕竟这东西也常用。第一个是自己写的,有平滑滚动的效果,第二个是参考了一下别人的思路,然后自己用了前面的讲到的虚拟dom,还用面向对象进行了封装。第三个轮播图在第二个的基础上修改而成,本来是用js写平滑滚动的效果的,就像第一个的这种平滑滚动,但始终有点bug没有解决,百度了下思路,发现可以用CSS3的属性来进行平滑滚动。


第一个:

轮播图1.gif

这款轮播图特点是自定义程度高,可以自行修改很多参数,来达到不同的显示效果。也可以将图片换成各种想要滚动的元素,让各种元素进行滚动

缺点就是没有相关的控件来控制图片移动


第二个:

轮播图2.gif

这款轮播图特点是使用非常简单,导入即可使用

缺点是自定义程度不高,图片转换没有平滑滚动,并且只支持图片滚动。


第三个:

ezgif.com-video-to-gif.gif

缺点就是滚动到最后一张图片,会返回到初始位置继续滚动。



项目地址:

https://github.com/LuckyHH/Carousel


视频转gif:

https://ezgif.com/video-to-gif


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广