js不显示-慕课网

js不显示

来源：1-3 实例JS+DOM

qq_骑行夏威夷_1

2018-06-24 11:34

<!DOCTYPE html>
<html>
<head>
<title>lianxi</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="fujian.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<script src="scripts/fu.js"></script>

</head>
<body>

</body>
</html>

#shen{
height: 477px;
margin: 0 auto;/*auto,(中间显示）也是指的上下边距为0，左右边距自动适应宽度相等*/
border-right: 1px solid purple;
border-bottom: 1px solid purple;
overflow: hidden;/*溢出的时候进行隐藏*/
position: relative;
}

#shen img {
position: absolute;
display: block;
left: 0;
border-left: 1px solid purple;

}

window.onload=function(){
/*onload属于DOM中，意识是页面加载完毕。整句话的意思是，页面加载完毕后，执行匿名函数的内容*/
var box=document.getElementById('shen') ;
var imgs=box.getElementsByTagName('img');

//通过标签名来获得当前网页中的元素对象的，而且它返回的是一个数组，因为tag相同的元素可能不止一个这个时候就需要用getElementsByTagName("a")[0](返回第一个元素)来获得对象的引用//

   //下面定义单张图片的实际宽度//
   var imgwidth=img[0].offsetWidth;//offsetWidth是对象整体的实际宽度，就是除了外边界的宽度，boder+padding+width//

   //设置堆叠宽度//
   var expose=160;

   //设置容器的总宽度//
   var boxwidth=imgwidth+(img.length-1)*expose;
   box.style.width=boxwidth+'px';

   for(var i=1,len=imgs.length;i<len;i++) {
   imgs[i].style.left=imgwidth+expose*(i-1)+"px"
   }

};

写回答关注