js实现自动轮换选项卡


Posted in Javascript onJanuary 13, 2017

本文实例为大家分享了js自动轮换选项卡的具体代码,供大家参考,具体内容如下

效果图:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js中小数转换整数的方法
Jan 26 Javascript
RequireJS使用注意细节
May 15 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
angular实现spa单页面应用实例
Jul 10 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
详解angularJs中自定义directive的数据交互
Jan 13 #Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 #Javascript
很棒的一组js图片轮播特效
Jan 12 #Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 #Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 #Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 #Javascript
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
javascript 禁止复制网页
2009/06/11 Javascript
javascript 写类方式之二
2009/07/05 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python中函数传参详解
2016/07/03 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python读写文件基础知识点
2019/06/10 Python
python groupby 函数 as_index详解
2019/12/16 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
行政总经理岗位职责
2013/12/05 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
乌镇导游词
2015/02/02 职场文书
西湖英语导游词
2015/02/06 职场文书
2015年药店工作总结
2015/04/20 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python