<!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; 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; 820px; height:265px; left:0px; top:35px; background:#fff; } .left img{ 250px; height:220px; background:red; margin:10px 10px 2px; } .left p{ margin-left:10px; 250px; text-align:center; background:#D6EFF7; line-height:20px; font-size:12px; } #new .showbox, #geek .showbox{ position:absolute; top:10px; left:270px; 540px; height:220px; overflow:hidden; } #new ul, #geek ul{ 1800px; } #new ul img, #geek ul img{ 160px; height:150px; margin:0px 10px 5px; } #new ul p, #geek ul p{ font-size:12px; color:#999; 160px; margin:5px 10px; } #new .nav, #geek .nav{ position:absolute; top:235px; 540px; left:260px; } .nav li{ display:block; margin-right:60px; font-weight:bold; position:relative; left:200px; 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; 55px; } #new .bullets li, #geek .bullets li{ display:block; 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); };