<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding:0px;
margin:0px;
}
.roll{
height:477px;
margin:0 auto;
border-right:1px solid gray;
border-bottom:1px solid black;
overflow:hidden;
position:relative;
}
img{
/*float:left;*/
position:absolute;
display:block;
left:0px;
border-left:1px solid gainsboro;
}
</style>
<script>
window.onload=function(){
var box=document.getElementsByClassName("roll");
var imgs=document.getElementsByTagName("img");
var imgWidth=imgs[0].offsetWidth;
var exposeWidth=160;
var rollWidth=imgWidth+exposeWidth*(imgs.length-1);
box[0].style.width=rollWidth+"px";
function setImgsPost(){
for(var i=1;i<imgs.length;i++){
imgs[i].style.left=imgWidth+(i-1)*160+"px";
}
};
setImgsPost();
var translate=imgWidth-exposeWidth;//鼠标划过后，本来隐藏着的图片露出来的宽度
for(var i=0;i<imgs.length;i++){
(function(){
imgs[i].onmouseover=function(){
setImgsPost();
for(var j=1;j <= i;j++){
imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+"px";
};
};
})(i)
}
}
</script>
</head>
<body>
<div class="roll">
<img src="img/door1.png" alt="1080p神器" title="080p神器">
<img src="img/door2.png" alt="5.5寸四核" title="5.5寸四核">
<img src="img/door3.png" alt="四核5寸" title="四核5寸">
<img src="img/door4.png" alt="5.7寸机皇" title="5.7寸机皇">
</div>
</body>
</html>
代码和老师一样的，报错显示imgs[j].style.left是undefined,求问为什么呀？
