js 实现自动轮换选项卡

效果图大致如下：

代码如下：

<!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>

js 实现自动轮换选项卡

猜你喜欢