css+js实现层叠式轮播图(一)

先放一张预览图给大家看看

效果是轮播到当前的图片时,放大显示然后整个轮播图只会显示当前图片,上一张和下一张图片,

其他的图片不会显示,接下来就是写代码时间

首先要将静态页面布置好

html的结构大概为这样,至少需要5张图片

从上往下分别是左2,左1图片中间图片右1,右2图片

然后是css样式设置

        .img_box_prev2 {
            left: -100px;
            z-index: 10;
        }

        .img_box_prev1 {
            left: 0;
            z-index: 30;
        }

        .img_box_active {
            left: 200px;
            z-index: 50;
            transform: scale(1.3);
        }

        .img_box_next1 {
            left: 400px;
            z-index: 30;
        }

        .img_box_next2 {
            left: 550px;
            z-index: 10;
        }

中间的图片层级是最高,向两边依次递减

样式设置完后来看看页面是怎样显示的

然后底层图片的蒙版样式设置

        .img_box_active .mask {
            opacity: 0;
        }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            transition: all .5s linear;
            z-index: 11;
        }

需要显示的图片的蒙版给予透明

然后给外层容器overflow: hidden效果,只显示我们需要展示的3张图片即可

到这里html和css编写就基本完成了,接下来就是要让图片动起来

我们需要js来实现这个功能,我会在下一篇文章把剩下的功能讲完的,关注我看后续哦~

css+js实现层叠式轮播图(一)

猜你喜欢