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