标签：background absolute position relative display
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0;}
li{ list-style:none;}
#div1{ min-width:1000px; height:400px; position:relative; overflow:hidden;}
#div1 ul{ left:0; position:absolute;}
#div1 ul li{ float:left;}
#div1 ul li img{ position:relative;}
#btn{ position:absolute; bottom:10px; text-align:center; width:100%;}
#btn a{ width:11px; height:11px; background:#666; cursor:pointer; display:inline-block;}
#btn a:hover,#btn a.active{ background:#FFF;}
*html .ie6_out{ margin-left:1000px;zoom:1;}
*html .ie6_in{ position:relative; float:left; margin-left:-1000px;}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
var aLi = oDiv.getElementsByTagName(‘li‘);
var aImg = oDiv.getElementsByTagName(‘img‘);
var oBtn = document.getElementById(‘btn‘);
var aA = oBtn.getElementsByTagName(‘a‘);
var imgWidth = 1920;
var iNow = 0;
var iNow2 = 0;
oUl.style.width = imgWidth*aImg.length + ‘px‘;
function toResize(){
var viewWidth = document.documentElement.clientWidth;
if(viewWidth>1000){
for (var i = 0; i<aImg.length;i++){
aImg[i].style.left = -(imgWidth - viewWidth)/2 + ‘px‘;
}
}
}
toResize();
window.onresize = function(){
toResize();
}
for(var i = 0; i<aA.length;i++){
aA[i].index = i;
aA[i].onclick = function(){
for(var i = 0; i<aA.length;i++){
aA[i].className = ‘‘;
}
this.className = ‘active‘;
startMove(oUl,{left: -this.index*imgWidth});
}
}
setInterval(toRun,3000);
function toRun(){
if(iNow == aLi.length - 1){
iNow = 0;
aLi[0].style.position = ‘relative‘;
aLi[0].style.left = aImg.length * imgWidth + ‘px‘;
}
else{
iNow++;
}
iNow2++;
for(var i = 0; i<aA.length;i++){
aA[i].className = ‘‘;
}
aA[iNow].className = ‘active‘;
startMove(oUl,{left: -iNow2*imgWidth},function(){
if(iNow == 0){
aLi[0].style.position = ‘static‘;
oUl.style.left = 0;
iNow2 = 0;
}
});
}
}
</script>
</head>
<body>
<!--[if lte IE 6]>
<div class = "ie6_out">
<div class = "ie6_in">
<![endif]-->
<div id="div1">
<ul>
<li><img src="语诺健康/images/3.jpg"></li>
<li><img src="语诺健康/images/4.jpg"></li>
<li><img src="语诺健康/images/6.jpg"></li>
<li><img src="语诺健康/images/7.jpg"></li>
</ul>
<div id="btn">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<!--[if lte IE 6]>
</div>
</div>
<![endif]-->
</body>
</html>
标签：background absolute position relative display
原文地址：http://jiuyuechumei.blog.51cto.com/7217281/1611509
