js实现自动轮换选项卡

网络编程 2025/1/14 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js自动轮换选项卡,js自动切换选项卡,js选项卡切换

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“js实现自动轮换选项卡”

暂无评论...

www.csstdc.com 快活林资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年01月14日

js实现自动轮换选项卡

原生js实现下拉框功能（支持键盘事件）

Javascript 使用ajax与C#获取文件大小实例详解

评论“js实现自动轮换选项卡”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接