window.onload=function(){
//获取容器
var div=document.getElementById("div");
//获取img
var imgs=document.getElementById("div").getElementsByTagName("img");
//获取单张图片的宽度
var imgw=475;
//设置掩藏门露出的宽度
var expw=160;
//设置每张图片的初始位置
function setpos(){
for(var i=1;i<imgs.length;i++){
imgs[i].style.left=imgw+expw*(i-1)+"px";
}
}
setpos();
//计算滑动门打开的距离
var juli=imgw-expw;
//为每道门绑定事件
for(var i=0;i<imgs.length;i++){
//为了获取不同的i值,使用立即表达式
(function(i){
imgs[i].onmouseover=function(){
//要将每到门复位
setpos();
//打开门的代码
for(var j=1;j<=i;j++){
imgs[j].style.left=parseInt(imgs[j].style.left)-juli+"px";
}
};
})(i);
}
};
j表示的就是第几张图片, j=1;j<=i,就是表示从第二张图片到当前所onmouseover的图片;如果是当前所选的是第一张,那就直接调用setpos()复位回去不用执行 for(var j=1;j<=i;j++){
imgs[j].style.left=parseInt(imgs[j].style.left)-juli+"px";
}