- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>js原生自动播放选项卡</title>
- <style type="text/css">
- *{
- padding:0;
- margin:0;
- font-family:'微软雅黑';
- }
- body{
- background:#555;
- }
- a{
- text-decoration:none;
- color:#333;
- }
- li{
- list-style:none;
- }
- #Tab_box{
- width: 400px;
- margin:50px auto;
- }
- .T_menu{
- overflow: hidden;
- }
- .T_menu li{
- float:left;
- width: 100px;
- text-align: center;
- height: 40px;
- line-height: 40px;
- background:#efefef;
- cursor:pointer;
- }
- .T_menu li.active{
- background:red;
- color:#fff;
- }
- .listbox{
- position:relative;
- overflow: hidden;
- width: 400px;
- height:304px;
- background:blue;
- }
- .listbox ul{
- position: absolute;
- left: 0;
- top:0;
-
- }
- .listbox li{
- width: 396px;
- height:300px;
- border:2px #ccc solid;
- text-align: center;
- font-size:50px;
- font-weight:bold;
- line-height: 300px;
- float:left;
- cursor:pointer;
- }
- </style>
-
- <script type="text/javascript">
- //获取非行间样式方法:
- function getStyle(obj, name)
- {
- if(obj.currentStyle)
- {
- return obj.currentStyle[name];
- }
- else
- {
- return getComputedStyle(obj, false)[name];
- }
- };
-
- function startMove(obj, json, fnEnd)
- {
- clearInterval(obj.timer);
- obj.timer=setInterval( function ()
- {
- var oStop=true;
- for( var trra in json)
- {
- var cur=0;
- if(trra=='opacity')
- {
- cur=Math.round(parseFloat(getStyle(obj, trra))*100);
- }
- else
- {
- cur=parseInt(getStyle(obj, trra));
- }
-
- var speed=(json[trra]-cur)/5;
- speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度取整
-
- if(cur!=json[trra])
- oStop=false;
-
- if(trra=='opacity')
- {
- obj.style.filter='alpha(opacity='+(cur+speed)+')';
- obj.style.opacity=(cur+speed)/100;
- }
- else
- {
- obj.style[trra]=cur+speed+"px";
- }
- }
-
- if(oStop)
- {
- clearInterval(obj.timer);
-
- if(fnEnd)fnEnd();
- }
-
- }, 30);
- };
- window.onload=function()
- {
- var oTbox=document.getElementById('Tab_box');
- var aTmenu=document.getElementsByClassName('T_menu')[0].getElementsByTagName('li');
- var oListUl=document.getElementsByClassName('listbox')[0].getElementsByTagName('ul')[0];
- var oListLi=document.getElementsByClassName('listbox')[0].getElementsByTagName('li');
- var now=0;
-
- oListUl.style.width=oListLi.length*oListLi[0].offsetWidth+'px';
- for(var i=0;i<aTmenu.length;i++)
- {
- aTmenu[i].index=i;
- aTmenu[i].onclick=function()
- {
- if(this.index==now) return;//阻止当前事件
- now=this.index;
- tab();
- }
- }
-
- function tab ()
- {
- for(var j=0;j<aTmenu.length;j++)
- {
- aTmenu[j].className='';
- }
- aTmenu[now].className='active';
- startMove(oListUl, {left:-400*now})
- }
-
- function next ()
- {
- now++;
- if(now==aTmenu.length)
- {
- now=0;
- }
- tab();
- }
- //自动播放
- var timer=setInterval(next, 2000);
- oTbox.onmouseover=function()
- {
- clearInterval(timer);
- }
- oTbox.onmouseout=function()
- {
- timer=setInterval(next, 2000);
- }
- }
- </script>
- </head>
-
- <body>
- <div id="Tab_box">
- <ul class="T_menu">
- <li class="active">选项一</li>
- <li>选项二</li>
- <li>选项三</li>
- <li>选项四</li>
- </ul>
- <div class="listbox">
- <ul>
- <li style="background:#eeaadd;left:0;">一</li>
- <li style="background:#fefefe">二</li>
- <li style="background:#aaa">三</li>
- <li style="background:#f88">四</li>
- </ul>
- </div>
- </div>
- </body>
- </html>