带详情页的js动画轮播图特效

轮播图 纯js 2018-07-31

控件介绍
这是一款带详情页的js动画轮播图特效。该轮播图点击前后导航按钮可以以炫酷动画的方式来展示图片和文字。当点击向下展开按钮时,会全屏展示对应页面的详情。
浏览器兼容

不支持IE

演示下载 1410
使用方法

需要注意的是,该js轮播图中使用了一些新的CSS特性,所以不是所有的浏览器都支持该特性。

开始时,图片在屏幕居中显示,文字会显示在图片的上面。

带详情页的js动画轮播图特效-1

当点击前后导航按钮的时候,图片和文字以运动的方式被切换。

带详情页的js动画轮播图特效-2

当点击详情按钮时,详情页会向上升起,覆盖整个页面。

带详情页的js动画轮播图特效-3

该带详情页的js动画轮播图特效的github地址为:https://github.com/codrops/MotionRevealSlideshow/

本文转载请注明出处:http://www.zhuiye.com/detail_892.html