嵌套选项卡自动播放

 

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{
	 500px;
    margin: 50px auto 0;
}
.top{
	 100%;
    height: 50px;
}
.top li{
	 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{
	 250px;
	height: 152px;
	border: 1px solid #c9c7c9;
	margin-left: 20px;
}
#cont li{
	 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].onclick=function(){
			a=this.index;
			fn(this.index);
			fn1();
		}
	}
	//点击右侧列表切换图片
	fn1();
	
	//自动切换
	move();
	
	//清除定时器
	oBox.onmouseover=function(){
		clearInterval(timer);
		fn1();
	}
	oBox.onmouseout=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].onclick=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)
	}