web超轻量级手风琴效果，基于jquery，可批量生产，构造函数

css

.box{border:1px solid #333;width:700px;height:500px;position:relative;overflow:hidden;}
.box img{height:100%;width:100%;position:absolute;left: 0;top:0;transition: all 0.5s;}

html

<div class="box"></div>
<script src="./static/jquery2.1.4.min.js"></script>

js

function CatCreateShades(o){
    this.dom = $(o.dom);
    this.data = o.data;
    this.llist=[];
    this.init();
}
CatCreateShades.prototype.init = function(){
    let that = this;
    let dis = that.dom.width()/that.data.length;
    for(let i = 0;i<that.data.length;i++){
        that.llist.push(i*dis);
        $("<img style='left:"+i*dis+"px;' src='"+that.data[i]+"'>").hover(function(){// 根据真实数据结构更改
            that.dom.find("img").eq(i).css({"left":"0px","z-index":"9"})
        },function(){
            for(let a = 0;a<that.llist.length;a++){
                that.dom.find("img").css("z-index","0").eq(a).css("left",that.llist[a]+"px")
            }
        }).appendTo(that.dom);
    }
}

使用（js）

let data = ["./resources/01.jpg","./resources/02.jpg","./resources/03.jpg","./resources/04.jpg","./resources/05.jpg","./resources/06.jpg","./resources/07.jpg"];
new CatCreateShades({dom:".box",data:data})

小手点赞，水逆退散，点赞的朋友今年能找到女（男朋友）