<!DOCTYPE html><html><head><meta charset="UTF-8"><title>#</title><style type="text/css">.cl{content: "";display: block;clear: both;zoom:1;}.box{background: #cff;width: 300px;height: 200px;position: absolute;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;}.box>div{float: left;}.box .left,.box .right{width: 50px;height: 200px;}.box .left li,.box .right li{width: 50px;height: 49px;line-height: 49px;text-align: center;cursor: pointer; border-bottom: 1px solid #ccc;list-style: none;}.box .active{background: #ccf;}.box .img{width: 200px;height: 200px;background: #ccc;}</style></head><body><div class="box cl"><div><li>1</li><li>2</li><li>3</li><li style='height: 50px;border: none;'>4</li></div><div></div><div><li>5</li><li>6</li><li>7</li><li style='height: 50px;border: none;'>8</li></div></div><script type="text/javascript">var aDiv=document.getElementsByClassName('box');var arr=['#f00','#0f0','#00f'];function Tab(aDiv){var aDiv1=aDiv.getElementsByTagName('div');var aLi=aDiv.getElementsByTagName('li');for(var i=0;i<aLi.length;i++){aLi[i].index=i;aLi[i].onmouseover=function(){num=this.index;clearInterval(timer);}aLi[i].onmouseout=function(){timer=setInterVal(function(){if(num==aLi.length){num=0;}else{num++;aLi[num-1].className='';aLi[num].className='active';aDiv1[1].style.background=arr[i%arr.length];}},1000);}}var num=0;var timer=setInterVal(function(){if(num==aLi.length){num=0;}else{num++;for(var i=0;i<aLi.length;i++){aLi[i].className='';}aLi[num].className='active';aDiv1[1].style.background=arr[i%arr.length];}},1000);}for(var i=0;i<aDiv.length;i++){Tab(aDiv[i]);}</script></body></html>
添加回答
举报
0/150
提交
取消