js实现自动轮换选项卡

本文实例为大家分享了射流研究…自动轮换选项卡的具体代码，供大家参考，具体内容如下

效果图：

代码：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style * { padd :0；margin :0 } ul { list-style : none；} #内容{宽度：300像素高度：200 px余量：150px汽车；border:10px固体# cccpadding :10 px } # top { width :300 px高度：50 px背景# ccc} #顶级a { height:50px线高：50 pxfont-size :20 px文本装饰：无；color: # 000display :内嵌块；padding:0 10px } # top a . active {背景：黄色；} # main { width:300px高度：150 px背景# f1f1f1} #主img { width:200px高度：150 px} # main ul { width:100px高度：150 px显示：内嵌块；右浮动：} #主ul li { width:100px高度：50 px背景# f1f1f1边框-bottom:1px虚线# 000;线高：50 px文本对齐：居中；} #主ul李。活动{背景：蓝色；}/style脚本窗口。onload=function(){ var content=document。getelementbyid(' content ')；var top=文档。getelementbyid(' top ')；var aA=top。getelementsbytagname(' a ')；var main=文档。getelementbyid(' main ')；var img=主。getelementsbytagname(' img ')[0]；var AlI=main。getelementsbytagname(' Li ')；var arr=[ { title : '动漫，副标题： ['波波鸟','白魔女','小龙女]，pics : ['img/1.png '，' img/2.png '，' img/3.png']，}，{ title : '购物，副标题： ['头盔','雪橇','内衣]，pics : ['img/4.png '，' img/5.png '，' img/6.png']，}]；var row=0，col=0；定义变量计时器=null for(var I=0；一、长度；i ) { aA[i].innerHTML=arr[i].标题；aA[i].索引=我；aA[i].onmouseover=function(){ tab(this。索引)；} }选项卡(0);内容。onmouseover=function(){ for(var I=0；我是aA。长度；i ) { if (aA[i]).类名===' active '){ row=I；打破；} } for(var I=0；I AlI . len thi){ if(AlI[I]).类名===' active '){ col=I；打破；} } clearInterval(计时器);} content.onmouseout=autoPlay//自动播放函数autoPlay() { clearInterval(计时器);定时器=设置间隔(函数(){ //子标题，逢子标题长度， //并且主标题加1, //当子标题和主标题当前inded=长度时，归0列；if(col===aLi.length)行；row %=Aa . length col %=AlI . length for(var I=0；I AlI . len thi){ AlI[I].aLi[col].class name=' active img . src=arr[row].pics[col]；for(var I=0；I AlI . len thi){ AlI[I].innerHTML=arr[row].副标题[一]；} for(var I=0；我是aA。长度；i ) { aA[i].aA[row].className=' active}，2000年)；} autoPlay()；函数选项卡（索引){ for(var I=0；我是aA。长度；i ){ aA[i].className=} Aa[索引]。class name=' active for(var j=0；j arr[索引]。副标题。长度；j ) { aLi[j].innerHTML=arr[index].副标题[j]；阿里[j].index=j；阿里[j].onmouseover=function(){ for(var I=0；I AlI . len thi){ AlI[I].class NAmE=} this . class NAmE=' active img . src=arr[index].图片[这个。索引]；} } img.src=arr[index].pics[0]；for(var I=0；I AlI . len thi){ AlI[I].aLi[0].class name=' active } }/script/head dydiv id=' content ' div id=' top ' a href=' JAVAScript :/a a href=' JAVAScript :/a/div div id=' main ' img/ul Li/Li Li/Li/ul/div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。