<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
ul{
overflow:hidden;
position:relative;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
}
li{
list-style-type:none;
float:left;
}
#wrap{
background:#D6EFF7;
border:1px #73bdef solid;
margin:50px auto;
width:800px;
height:280px;
padding:10px;
position:relative;
}
#tabs{
margin-left:300px;
}
#tabs li{
background:#CCC;
padding:6px 30px;
margin-right:15px;
font-size:12px;
color:#087b00;
border:1px solid #a5def7;
}
#new,#geek{
position:absolute;
width:820px;
height:265px;
left:0px;
top:35px;
background:#fff;
}
.left img{
width:250px;
height:220px;
background:red;
margin:10px 10px 2px;
}
.left p{
margin-left:10px;
width:250px;
text-align:center;
background:#D6EFF7;
line-height:20px;
font-size:12px;
}
#new .showbox, #geek .showbox{
position:absolute;
top:10px;
left:270px;
width:540px;
height:220px;
overflow:hidden;
}
#new ul, #geek ul{
width:1800px;
}
#new ul img, #geek ul img{
width:160px;
height:150px;
margin:0px 10px 5px;
}
#new ul p, #geek ul p{
font-size:12px;
color:#999;
width:160px;
margin:5px 10px;
}
#new .nav, #geek .nav{
position:absolute;
top:235px;
width:540px;
left:260px;
}
.nav li{
display:block;
margin-right:60px;
font-weight:bold;
position:relative;
left:200px;
width:20px;
height:20px;
border:1px solid #73BDEF;
text-align:center;
padding:0 10px;
cursor:pointer;
}
#new .bullets, #geek .bullets{
position:absolute;
top:240px;
left:510px;
width:55px;
}
#new .bullets li, #geek .bullets li{
display:block;
width:10px;
height:10px;
border:1px solid #73BDEF;
border-radius:10px;
margin:0px 2px;
background:#fff;
}
#geek .bullets{
left:525px;
}
</style>
<script type="text/javascript" src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
var otabs = document.getElementById('tabs');
var tli = otabs.getElementsByTagName('li');
var onew = document.getElementById('new');
var ogeek = document.getElementById('geek');
var abull1 = onew.getElementsByClassName('bullets')[0].getElementsByTagName('li');
var abull2 = ogeek.getElementsByClassName('bullets')[0].getElementsByTagName('li');
var arrow1 = onew.getElementsByClassName('nav')[0].getElementsByTagName('li');
var arrow2 = ogeek.getElementsByClassName('nav')[0].getElementsByTagName('li');
var ashowbox = document.getElementsByClassName('showbox');
var content1 = ashowbox[0].getElementsByTagName('ul')[0];
var content2 = ashowbox[1].getElementsByTagName('ul')[0];
var num = 0;
//初始化
tli[0].style.background = '#fff';
onew.style.display = 'block';
abull1[0].style.background = '#999';
abull2[0].style.background = '#999';
//转换
tli[0].onmouseover = function ()
{
for( var i = 0; i < tli.length; i++)
{
tli[i].style.background = '#EFEFF7';
}
this.style.background = '#fff';
onew.style.display = 'block';
ogeek.style.display = 'none';
};
tli[1].onmouseover = function ()
{
for( var i = 0; i < tli.length; i++)
{
tli[i].style.background = '#EFEFF7';
}
this.style.background = '#fff';
onew.style.display = 'none';
ogeek.style.display = 'block';
};
arrow1[1].onclick = function ()
{
num++;
if( num == abull1.length )
{
num = abull1.length - 1;
}
domove(content1,'left',30,30,-540*num,function ()
{
for ( var i = 0; i < abull1.length; i++)
{
abull1[i].style.background = '#fff';
}
abull1[num].style.background = '#999';
})
};
arrow1[0].onclick = function ()
{
num--;
if(num < 0)
{
num = 0;
}
domove(content1,'left',30,30,-540*num,function()
{
for( var i = 0; i < abull1.length; i++)
{
abull1[i].style.background = '#fff';
}
abull1[num].style.background = '#999';
})
}
};
</script>
</head>
<body>
<div id="wrap">
<ul id="tabs">
<li>新品</li>
<li>极客</li>
</ul>
<div id="new" style="display:block;">
<div class="left">
<img src="img/5-16.jpg">
<p>枫叶</p>
</div>
<div class="showbox">
<ul>
<li>
<img src="img/5-1.jpg">
<h2>图片一</h2>
<p>图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-2.jpg">
<h2>图片二</h2>
<p>图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-3.jpg">
<h2>图片三</h2>
<p>图片介绍图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-4.jpg">
<h2>图片四</h2>
<p>图片介图片介绍图片介绍绍</p>
</li>
<li>
<img src="img/5-5.jpg">
<h2>图片五</h2>
<p>图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-6.jpg">
<h2>图片六</h2>
<p>图片介绍图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-7.jpg">
<h2>图片七</h2>
<p>图片介绍图片介绍图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-8.jpg">
<h2>图片八</h2>
<p>图片介图片介绍图片介绍图片介绍绍</p>
</li>
<li>
<img src="img/5-9.jpg">
<h2>图片九</h2>
<p>图片介绍图片介绍图片介绍图片介绍</p>
</li>
</ul>
</div>
<ul class="nav">
<li class="lf"><</li>
<li class="rt">></li>
</ul>
<ul class="bullets">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="geek" style="display:none;">
<div class="left">
<img src="img/5-15.jpg">
<p>枫叶</p>
</div>
<div class="showbox">
<ul>
<li>
<img src="img/5-6.jpg">
<h2>图片六</h2>
<p>图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-7.jpg">
<h2>图片七</h2>
<p>图片介绍图片介绍图片介绍</p>
</li>
<li>
<img src="img/5-8.jpg">
<h2>图片八</h2>
<p>图片介绍图片介绍图片介绍图片介绍</p>
</li>
</ul>
</div>
<ul class="nav">
<li class="lf"><</li>
<li class="rt">></li>
</ul>
<ul class="bullets">
<li class="active"></li>
</ul>
</div>
</div>
</body>
</html>
function getstyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function domove (obj,attr,step,frequency,target,endfn)
{
step = parseInt(getstyle(obj,attr))<target?step:-step;
clearInterval(obj.timer);
obj.timer = setInterval( function ()
{
var speed = parseInt(getstyle(obj,attr)) + step;
if(step>0&&speed>target||step<0&&speed<target)
{
speed = target;
}
obj.style[attr] = speed + 'px';
if( speed == target )
{
clearInterval(obj.timer);
endfn&&endfn();
}
},frequency);
};
function opacity(obj,step,target,frequency,endfn)
{
var currentOpacity = getstyle(obj,'opacity') * 100;
step = currentOpacity < target?step:-step;
clearInterval(obj.opacity)
obj.opacity = setInterval (function ()
{
currentOpacity = getstyle(obj,'opacity') *100;
var nextOpacity = currentOpacity + step;
if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
{
nextOpacity = target;
}
obj.style.opacity = nextOpacity/100;
obj.style.filter = 'alpha(opacity:)' + nextOpacity +')';
if(nextOpacity == target )
{
clearInterval(obj.opacity);
endfn&&endfn();
}
},frequency);
};
function shake(obj,attr,endfn)
{
if( obj.shaked ) { return; }
obj.shaked = true;
var num = 0;
var timer = null;
var arr = [];
var pos = parseInt(getstyle(obj,attr));
for( var i = 20; i > 0; i-=2 )
{
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shake);
obj.shake = setInterval(function ()
{
obj.style[attr] = pos + arr[num] +'px';
num++;
if(num==arr.length)
{
clearInterval(obj.shake);
endfn&&endfn();
obj.shaked = false;
}
},50);
};
浙公网安备 33010602011771号