用原生js写一个手风琴

html代码：

图片自己随便找几张即可

<div class="brand">
<ul class="brandLi">
<li><img src="img/brand1.jpg" alt="" /></li>
<li><img src="img/brand2.jpg" alt="" /></li>
<li><img src="img/brand3.jpg" alt="" /></li>
<li><img src="img/brand4.jpg" alt="" /></li>
<li><img src="img/brand5.jpg" alt="" /></li>
<li><img src="img/brand6.jpg" alt="" /></li>
</ul>
</div>

css代码：

.brand .brandLi{
width: 1200px;
height: 250px;
overflow: hidden;
}
.brand .brandLi li{
width: 150px;
float: left;
}

js代码：

var brandLi = document.querySelector(".brandLi");
var brandList = brandLi.getElementsByTagName("li");
var timer = null;
function list(){
for(var m=0;m<brandList.length;m++){
brandList[m].index = m;
brandList[m].onmouseover = function(){
var index = this.index;
if(timer){
clearInterval(timer);
}
timer = setInterval(function(){
var iWidth = brand.offsetWidth;
//console.log(iWidth); 1200
for(var m=0;m<brandList.length;m++){
if(index != brandList[m].index){
var speed = (150 - brandList[m].offsetWidth) / 5;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
brandList[m].style.width = brandList[m].offsetWidth + speed + "px";
iWidth -= brandList[m].offsetWidth; 
}
}
brandList[index].style.width = iWidth + "px";
},30);
}
}
}
list();