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;
        }

中间的图片层级是