问答详情
源自：1-3 实例JS+DOM

js不显示

<!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>

 <div id="shen">
 <img src="C:\Users\申津宇\Desktop\tu\shen.jpg" alt="108ok?" title="火影最棒！"><!--alt是图片不加载显示的内容，title是点击图片滑动的内容-->
 <img src="C:\Users\申津宇\Desktop\tu\shi.jpg" alt="109ok?" title="火影很好！">
 <img src="C:\Users\申津宇\Desktop\tu\wo.jpg" alt="110ok?" title="火影good！">
 </div>


</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"
   }

  


};


提问者：qq_骑行夏威夷_1 2018-06-24 11:34

个回答