<!DOCTYPE html>
<html>
<head>
<title>sliding doors</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/slidingdoors.css">
<script type="text/javascript" src="js/slidingdoors.js"></script>
</head>
<body>
<div id="container">
<img src="images/door1.png" alt="phone+1080P" title="1-phone 1080P" />
<img src="images/door2.png" alt="phone+4G" title="2-phone 4G" />
<img src="images/door3.png" alt="phone+4nuclear" title="3-phone 4nuclear" />
<img src="images/door4.png" alt="phone+1300Wpixel" title="4-phone 1300Wpixel" />
</div>
</body>
</html>
/*JS*/
window.onload = function(){
var box = document.getElementById("container");
var imgs = box.getElementsByTagName('img');
var imgWidth = imgs[0].offsetWidth;
var exposeWidth = 150;
var boxWidth = imgWidth + (imgs.length-1)*exposeWidth;
box.style.width = boxWidth + 'px';
function setImgPos(){
for (var i = 1; i < imgs.length; i++) {
imgs[i].style.left = imgWidth + (i-1)*exposeWidth + 'px';
}
}
setImgPos();
var translate = imgWidth - exposeWidth;
for (var i = 0; i < imgs.length; i++) {
//使用立即调用的函数表达式，为了获得不同的i值
(function(i){
imgs[i].onmouserover = function(){
setImgPos();
for(var j = 1; j <= i; j++){
imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px';
}
};
})(i);
}
};
我知道错在哪里了，真是够粗心的