标签：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;list-style:none;}
body{background:url(img/bg.gif) repeat top left;}
#box{width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;}
#box ul li{ opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;}
#box ul li div{ width:300px; height:400px; float:left;}
#box ul li span{ width:150px; height:400px; float:left;}
#box ul li .right{ float:right;}
#box ul .active{ opacity:1;}
#box ol{width:100%; height:34px; position:absolute; bottom:20px;}
#box ol li{ float:left; width:42px; height:42px; background:rgba(255,255,255,0.4); border-radius:50%;font-weight:bolder; margin:0 53px; cursor:pointer; position:relative;}
#box ol li span{ line-height:34px; text-align:center; background:#8bc2d4; position:absolute; top:4px; left:4px; width:34px; height:34px; border-radius:50%; color:#fff; font-size:20px;}
#box ol .active{ background:rgba(124,180,199,0.4);}
#box ol .active span{ color:#8bc2d4; background:#fff;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var oUl1=oBox.getElementsByTagName(‘ul‘)[0];
var aLi1=oUl1.getElementsByTagName(‘li‘);
var oOl1=oBox.getElementsByTagName(‘ol‘)[0];
var aLi2=oOl1.getElementsByTagName(‘li‘);
for(var i=0;i<aLi1.length;i++){
var aSpan=aLi1[i].getElementsByTagName(‘span‘);
for(var j=0;j<aSpan.length;j++){
aSpan[j].style.background=‘url(img/‘+(i+1)+‘.jpg)‘;
aSpan[j].style.backgroundPosition=‘-‘+j*150+‘px 0‘;
aSpan[j].style.width=0;
}
}
for(var i=0;i<aLi2.length;i++){
(function(index){
aLi2[i].onclick=function(){
tab(index);
};
})(i);
}
function tab(index){
for(var i=0;i<aLi2.length;i++){
var aSpan=aLi1[i].getElementsByTagName(‘span‘);
aLi1[i].style.opacity=0;
aLi2[i].className=‘‘;
for(var j=0;j<aSpan.length;j++){
aSpan[j].style.width=0;
}
}
aLi2[index].className=‘active‘;
aLi1[index].style.opacity=1;
var aSpan=aLi1[index].getElementsByTagName(‘span‘);
for(var i=0;i<aSpan.length;i++){
move(aSpan[i],{width:150});
}
}
};
</script>
</head>-
<body>
<div id="box">
<ul>
<li class="active" style="background:url(img/4.jpg) no-repeat;"><div><span></span><span class="right"></span></div><div><span></span><span class="right"></span></div></li>
<li style="background:url(img/1.jpg) no-repeat;"><div><span></span><span class="right"></span></div><div><span></span><span class="right"></span></div></li>
<li style="background:url(img/2.jpg) no-repeat;"><div><span></span><span class="right"></span></div><div><span></span><span class="right"></span></div></li>
<li style="background:url(img/3.jpg) no-repeat;"><div><span></span><span class="right"></span></div><div><span></span><span class="right"></span></div></li>
</ul>
<ol>
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ol>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lovetuantuan/p/4579305.html
