评论：jQuery 手风琴插件accordion.js  [查看原文]

纯css就可以实现这个效果：

.box {
	width:1000px;
	height:450px;
	margin:100px auto;
	overflow:hidden;
}
.box div {
	width:10%;
	float:left;
	transition:all 1s;
}
img {
	width:960px;
	cursor:pointer;
}
.box:hover div {
	width:5%;
}
.box div:hover {
	width:55%;
}

建议加一个imgArr接口，值为图片路径数组，直接使用图片数量做接口太死板，图片路径没法自定义。为了改最少的代码，所以直接在源代码扩展，默认参数去掉imgNum换上imgArr，在this.opts属性上继承默认参数之后，添加

this.opts.imgNum = this.opts.imgArr.length;

 然后在createElem方法中，将元素创建修改为

str += '<li><img src="'+this.opts.imgArr[i]+'" alt="#"></li>';

在建议加上一个默认展开页，添加属性autoShow，值为number类型：在inital中添加代码

if(this.opts.autoShow){
 	this.change(this.$item.eq(parseInt(this.opts.autoShow)))
}

最后真心感谢作者提供插件

smallhappiness0
2017/5/8 19:30:08

十分感谢朋友的留言，你可以把你改的发我，我直接更新上去。最近在学些别的例子，有点懒得改= =

我邮箱: umbrellacc@qq.com

感谢

图片不错 就是要q比

可以的

我要弄两套怎么用 怎么才能在html里的写好图片开始

smallhappiness0
2017/3/8 17:49:45

谢谢

$(window).on('resize', function () {
        self.opts.w = $(window).width();
        self.setData();
});

要图片宽度跟着浏览器变化的，在inital函数加上如上代码即可。

谎言花开0
2017/3/6 11:55:37

请问一下，这段代码具体加到哪里？