//容器對(duì)象
var?box?=?document.getElementById('container');

//獲得圖片NodeList對(duì)象集合
var?imgs?=?box.getElementsByTagName('img');

//單張圖片的寬度
var?imgWidth?=?imgs[0].offsetWidth;

//設(shè)置掩藏門體露出的寬度
var?exposeWidth?=?160;

//設(shè)置容器總寬度
var?boxWidth?=?imgWidth?+?(imgs.length?-?1)?*?exposeWidth;
box.style.width?=?boxWidth?+?'px';

//設(shè)置每道門的初始位置
function?setImgsPos()?{
???for?(var?i?=?1,?len?=?imgs.length;?i?<?len;?i++)?{
??????imgs[i].style.left?=?imgWidth?+?exposeWidth?*?(i?-?1)?+?'px';
???}
}
setImgsPos();

//計(jì)算每道門打開(kāi)時(shí)應(yīng)移動(dòng)的距離
var?translate?=?imgWidth?-?exposeWidth;

//為每道門綁定事件
for?(var?i?=?0,?len?=?imgs.length;?i?<?len;?i++)?{
???//使用立即調(diào)用的函數(shù)表答式，為了獲得不同的i值
???(function(i)?{
??????imgs[i].onmouseover?=?function()?{
?????????//先將每道門復(fù)位
?????????setImgsPos();
?????????//打開(kāi)門
?????????for?(var?j?=?1;?j?<=?i;?j++)?{
????????????imgs[j].style.left?=?parseInt(imgs[j].style.left,?10)?-?translate?+?'px';
?????????}
??????};
???})(i);
}