手风琴图片切换
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;
}
- 第一张图片
- 第二张图片
- 第三张图片
- 第四张图片
- 第五张图片
- 第六张图片