嵌套选项卡自动播放

HTML

<div class="box" id="box"><ul class="top" id="top"><li class="fl">专题</li><li class="fl">视频</li></ul><div class="clearFix" id="cont"><img class="fl" src=""/><ul class="fl"></ul></div>
</div>	

CSS

*{margin: 0;padding: 0;
}
.fl{float: left;
}
.fr{float: right;
}
.clearFix:after{display: block;clear: both;content: "";
}
li{list-style: none;
}
.box{width: 500px;margin: 50px auto 0;
}
.top{width: 100%;height: 50px;
}
.top li{width: 100px;height: 49px;line-height: 50px;text-align: center;border: 1px solid #c9c7c9;background: #f8f6f8;color: #3a383a;border-bottom: none;
}
.top li:nth-of-type(1){border-right: none;
}
.top li:nth-of-type(2){border-left: 1px solid #edeced;
}
.top .act{background: #fff;height: 50px;
}
#cont{padding: 10px 0;border: 1px solid #c9c7c9;
}
#cont img{width: 250px;height: 152px;border: 1px solid #c9c7c9;margin-left: 20px;
}
#cont li{width: 200px;height: 50px;margin-left: 10px;background: #dfe6e7;text-align: center;line-height: 50px;margin-bottom: 2px;cursor: pointer;
}
#cont .active{background: #646264;border: 2px solid #898889;border-left: none;border-right: none;color: #fff;margin-bottom: 0;
}

JS

	var imgArry=[["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510307985802&di=679784c92f883bd8fda0214c00bc6e89&imgtype=0&src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2Fd75e3906jw1ejgm0ph1vqj20t50jtwg1.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510308021938&di=ad40d39e8a4ba84f4be3b5c60afa60a1&imgtype=0&src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2Fd75e3906jw1eet1l6nzbzj20u40jvdjm.jpg","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3330510089,2295099251&fm=27&gp=0.jpg"],["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510308059233&di=b90a1d090263593aa999df78380d2f24&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7a899e510fb30f240f5749e9c295d143ac4b030e.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510294831731&di=4f24480dd0db1b935b204d039ea714bd&imgtype=0&src=http%3A%2F%2Frescdn.qqmail.com%2Fdyimg%2F20140316%2F749D81D568F6.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510308099207&di=15f437a9a740049988e631576dbfb8ef&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ffaedab64034f78f0f21e481c73310a55b2191cc3.jpg"]];var txtArry=[["专题一","专题二","专题三"],["视频一","视频二","视频三"]];var oBox=document.getElementById("box");var oTop=document.getElementById("top");var topLi=oTop.getElementsByTagName("li");var oCont=document.getElementById("cont");var oImg=document.getElementsByTagName("img")[0];var oUl=oCont.getElementsByTagName("ul")[0];var contLi=oCont.getElementsByTagName("li");var n=imgArry[0].length;var a=0;var b=0;var timer=null;//页面初始化fn(0);//点击标题切换内容for (var i=0;i<topLi.length;i++) {topLi[i].index=i;topLi[i].οnclick=function(){a=this.index;fn(this.index);fn1();}}//点击右侧列表切换图片fn1();//自动切换move();//清除定时器oBox.οnmοuseοver=function(){clearInterval(timer);fn1();}oBox.οnmοuseοut=function(){move();}//封装函数function fn(num){for (var i=0;i<topLi.length;i++) {topLi[i].className="fl";}topLi[num].className="fl act";oImg.src=imgArry[num][0];oUl.innerHTML=null;for (var i=0;i<n;i++) {oUl.innerHTML+="<li>"+txtArry[num][i]+"</li>";}contLi[0].className="active";}function fn1(){for (var i=0;i<contLi.length;i++) {contLi[i].index=i;contLi[i].οnclick=function(){if(a==0){b=this.index;}else{b=this.index+2;}fn11(this.index);}}}function fn11(num1){for (var i=0;i<contLi.length;i++) {contLi[i].className="";}contLi[num1].className="active";oImg.src=imgArry[a][num1];}function move(){timer=setInterval(function(){b++;if(b<n){a=0;fn(a);fn11(b);}else{a=1;fn(a);fn11(b%n);if(b==5){b=-1;}}},2000)}