js 实现自动轮换选项卡

来源：互联网发布：高科技app软件编辑：程序博客网时间：2024/06/05 10:49

效果图大致如下：

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; } #box{ width: 300px; height: 150px; margin: 50px auto; border: 1px red solid; position: relative; } #box #nav{ margin:10px; } #nav li{ width: 80px; height: 30px; float: left; text-align: center; line-height: 30px; list-style: none; background: yellow; color: #666; margin-right: 2px; display:inline-block; } img{ margin-top:0.5px; width: 195px; height: 100px; float: left; margin-left: 10px; display: block; } .show{ position: absolute; left: 210px; top: 40px; } .show li{ background: pink; width:80px; height: 33px; color: #666; text-align: center; line-height: 30px; border-bottom: 1px #fff solid; } </style> </head> <body> <div id="box"> <ul id="nav"> <li>菜单一</li> <li>菜单二</li> </ul> <img src="img/1.jpg" > <ul class="show"> <li>图片1</li> <li>图片2</li> <li>图片3</li> </ul> <ul class="show"> <li>图片4</li> <li>图片5</li> <li>图片6</li> </ul> </div> <script type="text/javascript"> window.onload=function(){ var arrImg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']; var nav=document.getElementById("nav"); aUl=document.getElementsByTagName('ul'); aImg=document.getElementsByTagName('img')[0]; num=0; flag=0; arrLi=[]; var timer=null; for(var i=1;i<aUl.length;i++){ var aLi=aUl[i].getElementsByTagName('li'); for(var j=0;j<aLi.length;j++){ arrLi.push(aLi[j]); } } function fa(){ for(var i=0;i<arrLi.length;i++){ arrLi[i].style.background='pink'; arrLi[i].style.color='#fff'; } for(var i=0;i<aUl[0].getElementsByTagName('li').length;i++){ aUl[0].getElementsByTagName('li')[i].style.cssText='background:yellow;color:#666'; } } function fb(){ fa(); arrLi[num].style.cssText='background:yellow;color:#666;'; aImg.src=arrImg[num]; if(flag==0){ nav.getElementsByTagName('li')[0].style.cssText='background:blue;color:#fff;'; aUl[2].style.display='none'; aUl[1].style.display='block'; num++; if(num==arrLi.length/2){ flag=1; } }else{ nav.getElementsByTagName('li')[1].style.cssText='background:blue;color:#fff'; aUl[1].style.display='none'; aUl[2].style.display='block'; num++; if(num==arrLi.length){ flag=0; num=0; } } } timer=setInterval(fb,1000); } </script> </body> </html>

阅读全文

0 0