< 返回新闻公共列表
HTML+CSS+JS实现堆叠轮播效果的示例代码
发布时间:2020-10-14 06:52:40
亿胜云 提供香港/国内多地区BGP 高防云 CDN 隐藏源 游戏盾可隐藏IP加端口类通讯应用
这篇文章主要介绍了HTML+CSS+JS实现堆叠轮播效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
效果:
轮播图在向一个方向移动的同时,要对其每一个图片的大小,位置,透明度以及层级进行改变
原理:
轮播图向左移动时将第一个子元素剪切到末尾,轮播图向右移动时,将末尾子元素剪切到最前面,以此实现无缝轮播效果,再因为li剪切后,下一个li会补上(例如第一个子元素被剪切到最后时,第二个字元素会补上成为第一个子元素),所以li下标不变,以次来修改每一个位置的li的属性(大小,位置,透明度,层级)
HTML代码:
←
//用一个div存放一个ul,并对ul里的每一个li进行初始样式设置
→
CSS代码:
JS代码:
注:本例js是直接写在body里的,也可以单独写一个js文件,在引入到html界面
文章来源:脚本之家,原文链接:https://www.jb51.net/css/744188.html