手风琴图片切换

　　这次学习的是一个手风琴的图片切换，主要是学习如何巧妙地布局。首先把整体的div分为<span>与<img>两部分，当鼠标触发事件是当前<span>则无需变化，否则展示图片逐渐缩减，当前图片逐渐增加。实现代码如下：

var aLi = oDiv.getElementsByTagName("li");
var aSpan = oDiv.getElementsByTagName("span");
var iWidth = oDiv.offsetWidth; 
var w = 0; //改变的width
var speed = 0
var bFlag = true;//是否结束时间循环事件
var i = 0;
for(i;i<aLi.length;i++){
     if(i == iIndex){  //如果是当前图片，跳出，不处理。
          continue;
     }
     if(iMinWidth == aLi[i].offsetWidth){
          iWidth -= iMinWidth; //减去隐藏图片占用的width
          continue;
     }
     bFlag = false;
     speed = Math.ceil((aLi[i].offsetWidth - iMinWidth)/10); //图片增减的速度
     w = aLi[i].offsetWidth - speed;
     if(w <= iMinWidth){
            w = iMinWidth;  //作为缩减图片的结束条件
     }
     aLi[i].style.width = w + "px"; //缩减图片的width
     iWidth -= w;//减最后一个隐藏图片的width
}
aLi[iIndex].style.width = iWidth + "px";//展示图片的width

if(bFlag){
     clearInterval(oDiv.timer);
     oDiv.timer = null;
}

• 第一张图片
• 第二张图片
• 第三张图片
• 第四张图片
• 第五张图片
• 第六张图片