Home » Code » 简易图片轮播(五)-手风琴效果

简易图片轮播(五)-手风琴效果

手风琴效果也比较常见,相对于前面的轮播图,比较简单一点。把图片绝对定位排好,适当移动即可。

window.onload = function(){
	var list = document.getElementById("list");
	var box = document.getElementById("box");
	var images = list.getElementsByTagName("li");			
	var len = images.length;			
	var oneWidth = images[0].offsetWidth;
	var d = 30;
	var current = 0;

	//设置宽度
	box.style.width = oneWidth + (len - 1) * d + 'px';
	//排好位置
	for(var i = 1; i < len; i++){
		images[i].style.left = oneWidth + d * (i - 1) + 'px';
	}
	//绑定事件
	for(var i = 0; i < len ; i++){
		images[i].index = i;
		images[i].onmouseover = function(){

			if(this.index == current){
				return;
			}
			var that = this.index;
			for(var i = 0; i < len; i++){
				if(i <= this.index){
					startMove(images[i], {left:i * d}, 1000, 'ExpoeaseOut');
				}else{
					startMove(images[i], {left:oneWidth + d * (i - 1)}, 1000, 'ExpoeaseOut');
				}
			}
			current = that;
		}
	}			
}

手风琴这里,就不用上一张下一张以及数字的按钮了,有的感觉比较别扭,鼠标移到哪一张就展开哪一张!

以上,参考自妙味课堂,感谢!

查看简易手风琴

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.