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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
详解jQuery-each()方法
Mar 13 jQuery
通过JS深度判断两个对象字段相同
Jun 14 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP的引用详解
2015/02/22 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
php实现每日签到功能
2018/11/29 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
checkbox使用示例
2013/08/23 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JS中Location使用详解
2015/05/12 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
银行竞聘演讲稿范文
2014/04/23 职场文书
python程序的组织结构详解
2021/12/06 Python