js实现自动轮换选项卡

时间:2020-05-15 光明大神棍人气:0
本文实例为大家分享了js自动轮换选项卡的具体代码，供大家参考，具体内容如下
效果图：
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
ul{list-style:none;}
#content{width:300px;height:200px;margin:150px auto;border:10px solid #ccc;padding:10px;}
#top{width:300px;height:50px;background:#ccc;}
#top a{height:50px;line-height:50px;font-size:20px;text-decoration:none;color:#000;display:inline-block;padding:0 10px;}
#top a.active{background:yellow;}
#main{width:300px;height:150px;background:#f1f1f1;}
#main img{width:200px;height:150px;}
#main ul{width:100px;height:150px;display:inline-block;float:right;}
#main ul li{width:100px;height:50px;background:#f1f1f1;border-bottom:1px dotted #000;line-height:50px;text-align:center;}
#main ul li.active{background:blue;}
</style>
<script>
window.onload = function () {
 var content = document.getElementById('content');
 var top = document.getElementById('top');
 var aA = top.getElementsByTagName('a');
 var main = document.getElementById('main');
 var img = main.getElementsByTagName('img')[0];
 var aLi = main.getElementsByTagName('li');
 var arr = [
  { 
   title : '动漫',
   subtitle : ['波波鸟','白魔女','小龙女'],
   pics : ['img/1.png','img/2.png','img/3.png'],
  },
  { 
   title : '购物',
   subtitle : ['头盔','雪橇','内衣'],
   pics : ['img/4.png','img/5.png','img/6.png'],
  }
 ];
 var row = 0, col = 0;
 var timer = null;
 for ( var i = 0; i < arr.length; i++ ) {
  aA[i].innerHTML = arr[i].title;
  aA[i].index = i;
  aA[i].onmouseover = function () {
   tab(this.index);
  }
 }
 tab(0);
 content.onmouseover = function () {
  for ( var i = 0; i < aA.length; i++ ) {
   if (aA[i].className === 'active') {
    row = i;
    break;
   }
  }
  for ( var i = 0; i < aLi.length; i++ ) {
   if (aLi[i].className === 'active'){
    col = i;
    break;
   }
  }
  clearInterval(timer);
 }
 content.onmouseout = autoPlay;
 // 自动播放
 function autoPlay() {
  clearInterval(timer);
  timer = setInterval(function () {
   // 子标题++，逢子标题长度，
   // 并且主标题加1，
   // 当子标题和主标题当前inded=长度时，归0
   col++;
   if(col === aLi.length) row++;
   row %= aA.length;
   col %= aLi.length;
   for ( var i = 0; i < aLi.length; i ++ ) {
    aLi[i].className = '';
   }
   aLi[col].className = 'active';
   img.src = arr[row].pics[col];
   for ( var i = 0; i < aLi.length; i++ ) {
    aLi[i].innerHTML = arr[row].subtitle[i];
   }
   for ( var i = 0; i < aA.length; i ++ ) {
    aA[i].className = '';
   }
   aA[row].className = 'active';
  }, 2000);
 }
 autoPlay();
 function tab(index) {
  for ( var i = 0; i < aA.length; i++ ){
   aA[i].className = '';
  }
  aA[index].className = 'active';

  for ( var j = 0; j < arr[index].subtitle.length; j++ ) {
   aLi[j].innerHTML = arr[index].subtitle[j];
   aLi[j].index = j;
   aLi[j].onmouseover = function () {
    for ( var i = 0; i < aLi.length; i ++ ) {
     aLi[i].className = '';
    }
    this.className = 'active';
    img.src = arr[index].pics[this.index];
   }
  }
  img.src = arr[index].pics[0];
  for ( var i = 0; i < aLi.length; i++ ){
   aLi[i].className = '';
  }
  aLi[0].className = 'active';  
 }
}
</script>
</head>

<body>
<div id="content">
 <div id="top">
  <a href="javascript:;"></a>
  <a href="javascript:;"></a>
 </div>
 <div id="main">
  <img/>
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>
</div>
</body>
</html>
加载全部内容