华为轮播图
<!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;> #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;>
#btn a{> #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');
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.style.left = -(imgWidth - viewWidth)/2 + 'px';
}
}
}
toResize();
window.onresize = function(){
toResize();
}
for(var i = 0; i<aA.length;i++){
aA.index = i;
aA.onclick = function(){
for(var i = 0; i<aA.length;i++){
aA.className = '';
}
this.className = 'active';
startMove(oUl,{left: -this.index*imgWidth});
}
}
setInterval(toRun,3000);
function toRun(){
if(iNow == aLi.length - 1){
iNow = 0;
aLi.style.position = 'relative';
aLi.style.left = aImg.length * imgWidth + 'px';
}
else{
iNow++;
}
iNow2++;
for(var i = 0; i<aA.length;i++){
aA.className = '';
}
aA.className = 'active';
startMove(oUl,{left: -iNow2*imgWidth},function(){
if(iNow == 0){
aLi.style.position = 'static';
oUl.style.left = 0;
iNow2 = 0;
}
});
}
}
</script>
</head>
<body>
<!-->
<div>
<div> <!-->
<div>
<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>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<!-->
</div>
</div>
<!-->
</body>
</html>
页:
[1]