首页 > 代码库 > 新浪数码轮播
新浪数码轮播
<!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="http://www.mamicode.com/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="http://www.mamicode.com/img/5-16.jpg"> <p>枫叶</p> </div> <div class="showbox"> <ul> <li> <img src="http://www.mamicode.com/img/5-1.jpg"> <h2>图片一</h2> <p>图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-2.jpg"> <h2>图片二</h2> <p>图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-3.jpg"> <h2>图片三</h2> <p>图片介绍图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-4.jpg"> <h2>图片四</h2> <p>图片介图片介绍图片介绍绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-5.jpg"> <h2>图片五</h2> <p>图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-6.jpg"> <h2>图片六</h2> <p>图片介绍图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-7.jpg"> <h2>图片七</h2> <p>图片介绍图片介绍图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-8.jpg"> <h2>图片八</h2> <p>图片介图片介绍图片介绍图片介绍绍</p> </li> <li> <img src="http://www.mamicode.com/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="http://www.mamicode.com/img/5-15.jpg"> <p>枫叶</p> </div> <div class="showbox"> <ul> <li> <img src="http://www.mamicode.com/img/5-6.jpg"> <h2>图片六</h2> <p>图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/img/5-7.jpg"> <h2>图片七</h2> <p>图片介绍图片介绍图片介绍</p> </li> <li> <img src="http://www.mamicode.com/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);};
新浪数码轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。