<html>
<head>
<style?type='text/css'>
*?{?margin:?0px;?padding:?0px;?text-decoration:?none;}
#container?{??overflow:?hidden;?margin:?50px?auto;?width:?550px;?height:?321px;?border:?4px?solid?#ccc;?position:?relative;}
#imgList?{?position:?absolute;?width:?800%;?height:?100%;}
#imgList?img?{?float:?left;}
#buttonList?{?position:?absolute;?margin:?auto;??right:?0;?left:?0;?bottom:?30px;?height:?10px;?width:?125px;}
#buttonList?span?{?margin:?0?4px;?height:?15px;?width:?15px;?float:?left;?text-indent:?-9999px;?cursor:?pointer;?border:?1px?solid?#fff;?border-radius:?50%;?background-color:?#333;}
.arrow?{?position:?absolute;?display:?none;?z-index:?10;?top:?180px;?line-height:?39px;?font-size:?39px;?font-weight:?bold;?width:?40px;?height:?39px;?text-align:?center;?background-color:?RGBA(0,0,0,.3);?color:?#fff;}
#prev?{?left:?10px;}
#next?{?right:?10px;}
#container:hover?.arrow?{?display:?block;}
.arrow:hover?{?background-color:?RGBA(0,0,0,.7);}
</style>
</head>
<body>
<div?id='container'>
<div?id='imgList'?style='left:?-550px;'>
<img?src='images/ads/5.jpg'?alt=""?/>
<img?src='images/ads/1.jpg'?alt=""?/>
<img?src='images/ads/2.jpg'?alt=""?/>
<img?src='images/ads/3.jpg'?alt=""?/>
<img?src='images/ads/4.jpg'?alt=""?/>
<img?src='images/ads/5.jpg'?alt=""?/>
<img?src='images/ads/1.jpg'?alt=""?/>
</div>
<div?id='buttonList'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a?href='javascript:void(0)'?id='prev'?class='arrow'><</a>
<a?href="javascript:void(0)"?id="next"?class="arrow">></a>
</div>
</body>
<script?type='text/javascript'>
function?$id(id){?return?document.getElementById(id);};
var?container?=?$id('container');
var?imgList?=?$id('imgList');
var?perv?=?$id('prev');
var?next?=?$id('next');
alert(imgList.style.left);
alert(imgList.offsetLeft);
</script>
</html>
為什么這里的offsetLeft和style.left不一樣????
上帝子民Chris
2016-10-02 21:29:34