<!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,求問為什么呀？
2018-06-06
把i沒有傳到匿名函數里，函數接不到i，下面的代碼是執行不了的
2017-08-10
你們素材自己隨便找的嘛？
2017-02-10
for(var?i=0;i<imgs.length;i++){ ????????????????????(function(i){ ????????????????????????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) ????????????????}?(function(i){ ?匿名執行函數 這兒把i傳進來試試