手风琴轮播图就是我在轮播图系列一中提起过的，那个让我感兴趣的轮播图，也是因为它再次勾起了我要整理轮播图系列的想法。手风琴轮播图并不复杂，好像也不是很常见，而且它也不是自动轮播的（这一方面，我之后会尝试看自动轮播的手风琴轮播图效果，这里暂且先不提）。
核心思想及问题
通过控制图片的展示宽度来实现轮播图效果
完整代码
效果预览
CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45html,
body {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.wrap {
width: 1200px;
height: 260px;
padding: 5px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.slide {
width: 1200px;
height: 260px;
position: relative;
overflow: hidden;
}
ul {
width: 1200px;
position: absolute;
left: 0;
}
ul li {
float: left;
width: 133px;
height: 260px;
background-position:left;
}
ul li:first-child{
width: 400px;
margin: 0 1px 0 0;
}
img {
width: 400px;
height: 260px;
vertical-align: middle;
}
可以通过li的“background-position: center;”样式来控制默认展示的图片位置，并控制鼠标经过的时候图片是向两侧展开还是向一侧展开。当设置这个样式的时候，默认显示图片中间区域，鼠标经过效果为向两侧展开；若不设置此样式（即默认“background-position: left;”）,默认显示图片左侧区域，鼠标经过效果为单侧展开。
HTML1
2
3<div class="wrap" id="wrap">
<div class="slide" id="slide"></div>
</div>
在前面的轮播图中，我都是直接在html中放入图片，而这里没有在html中插入图片而是用JS控制插入图片，之前的轮播图其实也都可以改成这种方式，这种做法在以后的维护中更方便。
JS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31var slide = document.getElementById('slide');
var ul=document.createElement('ul');
for(var i=0;i<7;i++){//在ul中插入li并设置背景图
var li=document.createElement('li');
li.style.backgroundImage='url(img/'+(i+1)+'.jpg)';
ul.append(li);
}
slide.append(ul);//将ul插入页面
var lis=ul.children;
var lis_len=lis.length;
//遍历li,所有li都有鼠标经过事件
for(var i=0;i<lis_len;i++){
lis[i].index=i;//获得序号
lis[i].addEventListener('mouseover',function(){
var that=this.index;
for(var j=0;j<lis_len;j++){//遍历，所有li外边界为0,宽度为收缩状
lis[j].style.margin=0;
moveAnimation(lis[j],{width:133});
}
// 判断，若是第一张图右侧有外边距，最后一张左侧有边距，否则两边都有边距
if(that===0){
this.style.margin="0 1px 0 0";
}else if(that===lis_len-1){
this.style.margin="0 0 0 1px";
}else{
this.style.margin="0 1px";
}
this.style.margin="0 px";
moveAnimation(this,{width:400});
});
}
注：同样，这里的JS代码也用到了moveAnimation函数，所以也要像轮播图（二）中的例子一样引入moveAnimation函数或引入其封装的moveAnimation.js
总结：手风琴轮播图相对于其它的轮播图是比较新颖的，而且用纯CSS也可以实现，今天先只介绍用JS实现的，感兴趣的话可以关注我后续的博客，用纯CSS来实现手风琴轮播图。
到这里轮播图系列就整理完毕了，这一系列我分类四篇来整理的，一共包括七种不同的轮播图，分别为：平滑无缝滚动轮播图、无缝切换轮播图（有箭头，无序号）、无缝切换轮播图（无箭头，有序号）、无缝切换轮播图（有箭头，有序号）、 经典网易轮播图、旋转木马轮播图以及今天的手风琴轮播图，希望可以帮到你。
本篇文章是由二蛋的前端博客：http://yyeggs.com/slideshow_accordion/ 整理。整理不易，转载请注明
