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

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

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

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

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

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

//計算每道門打開時應移動的距離
var?translate?=?imgWidth?-?exposeWidth;

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