那些年做过的Slider

好久没有写博客了,最近又在考虑开发新的博客主题了,我的每个博客主题都包含了一个自制的jQuery插件,用来显示博客顶部切换的轮播图。我认为一个好看的轮播图总能给你的博客增光添彩。所以这一片就来说说那些年我做过的滚动图吧!

其实这篇博文从6月份就开始准备了,因为最后我打算将我写的这个插件发布出来,所以多花了一些时间。说实话,我并没有研究过别人的Slider滚动图是如何实现的。纯粹是为了将自己好看的设计实现出来,凭空想象、无端捏造,不经意创造了这样的好东西。

在2017年我开发这个功能的时候,秉承着三个原则:

  1. 考虑兼容性
  2. 不在乎性能
  3. 必须要求将设计落地

在我后来开发的每个主题中,都使用了这个插件,将不同的设计落地实现。下面来看看这些年用这个插件实现出来的设计吧:

niRvana主题轮播图

这是2018年我开发的WordPress主题,顶部做了一个类似于苹果Coverflow的文章切换效果(点击视频播放)

reVival主题轮播图

这是2020年我开发的WordPress主题,顶部用“卡片翻倒”的设计做的轮播图。灵感来自于dribbble上某位设计师 (点击视频播放)

其他项目的轮播图

这是2019年我开发的登录界面,使用卡片轮播的效果显示更新历史。并且通过3D变换创造了类似景深的效果 (点击视频播放)

你也想用?

为了能让开发的轮播图多次使用,我考虑的是通用的实现方法:将每一页绝对定位,通过css类的修改来切换这些定位,从而让css自动去实现中间的切换动画。

如果你也想用,可以点击下面的按钮查看我的私人文档,最后的“示例”就包含demo和js代码了。你也试试看吧!