代码和老师是一样的却出错了？-慕课网

代码和老师是一样的却出错了？

来源：1-3 实例JS+DOM

紫菜蛋包饭

2017-02-09 23:50

<!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,求问为什么呀？

写回答关注

3回答

慕仰9892961

2018-06-06 14:45:56

把i没有传到匿名函数里，函数接不到i，下面的代码是执行不了的

0 0
一颗发光的仙丹要吃

2017-08-10 06:50:27

你们素材自己随便找的嘛？

0 0

慕粉3123627: 2017-02-10 10:01:58

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传进来试试

0 1

DOM探索之基础详解篇

要知道前端大牛都是从精通DOM开始的，全面讲解DOM的基础知识

98374 学习 · 238 问题

相似问题

回答 6

回答 2

回答 1

代码和老师一样为什么宽度不居中和第四张图没有动画效果呢？

回答 2

为什么老是都没敲代码直接一摁就什么都出来了？？

回答 5

打开慕课网App查看更多内容