html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
body {
background-color: #323232;
font-size: 12px;
font-family: "微软雅黑";
margin: 100px;
}
</style>
<link rel="stylesheet" href="tab1.css" />
<script src="../jquery-2.1.0.js" type="text/javascript"></script>
<script src="tab1.js" type="text/javascript"></script>
</head> <body> <div class="js-tab tab" data-config='{
"triggerType": "mouseover",
"effect": "fade",
"invoke": 2,
"auto": 3000
}'>
<ul class="tab-nav">
<li class="actived">
<a href="javascript:void(0);">新闻</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">电影</a>
</li>
<li>
<a href="#">科技</a>
</li>
</ul>
<div class="content-wrap">
<div class="content-item current" style="overflow: hidden;">
<img src="a.jpg" />
</div>
<div class="content-item" style="overflow: hidden;">
<img src="b.jpg" />
</div>
<div class="content-item" style="overflow: hidden;">
<img src="c.jpg" />
</div>
<div class="content-item" style="overflow: hidden;">
<img src="d.jpg" />
</div>
</div>
</div> <script>
$(function() {
// TAB
var tab1 = new Tab($(".js-tab").eq(0)); //
});
</script> </body> </html>
tab1.css内容
.tab{width: 300px;}
.tab .tab-nav{height: 30px;}
.tab .tab-nav li {float: left;margin-right: 5px;background-color: #767676;border-radius: 3px 3px 0 0;}
.tab .tab-nav li a{display: block;height: 30px; padding: 0 20px; color: #FFFFFF;line-height: 30px; text-decoration: none;}
.tab .tab-nav li.actived{background-color: #FFFFFF;}
.tab .tab-nav li.actived a {color: #777;}
.tab .content-wrap{background-color: #FFFFFF;padding: 5px;height: 200px;}
.tab .content-wrap .content-item {position:absolute; height: 200px; width:290px; display: none;}
.tab .content-wrap {display: block;overflow: hidden;}
.tab .content-wrap .current{display: block;overflow: hidden;}
tab1.js内容
;(function($){
var Tab = function(tab){
var _this_ = this;
//保存单个tab组件
this.tab = tab;
//默认配置参数
this.config = {
//用来定义鼠标的触发类型，是click还是mouseover
"triggerType": "mouseover",
//用来定义内容切换效果，是直接切换还是淡入淡出效果
"effect": "default",
//默认展示第几个tab
"invoke": 1,
//用来定义tab是否自动切换，当指定了时间间隔，就表示自动切换，并且切换时间为指定的时间间隔
"auto": false
};
//如果配置参数存在，就扩展掉默认的配置参数
if(this.getConfig()){
$.extend(this.config, this.getConfig());
};
//保存tab标签列表、对应的内容列表
this.tabItems = this.tab.find("ul.tab-nav li");
this.contentItems = this.tab.find("div.content-wrap div.content-item");
//保存配置参数
var config = this.config;
if(config.triggerType === "click"){
this.tabItems.bind(config.triggerType, function(){
_this_.invoke($(this));
});
}else if(config.triggerType === "mouseover" || config.triggerType != "click"){
this.tabItems.mouseover(function(){
_this_.invoke($(this));
});
};
//自动切换功能，当配置了时间，我们就根据时间间隔进行自动切换
if(config.auto){
//定义一个全局的定时器
this.timer = null;
//计数器
this.loop = 0;
this.autoPlay();
//鼠标放到选中的区域，停止轮播，鼠标移开，开启自动轮播
this.tab.hover(function(){
window.clearInterval(_this_.timer)
},function(){
_this_.autoPlay();
})
};
//设置默认显示第几个tab
if(config.invoke > 1){
this.invoke(this.tabItems.eq(config.invoke - 1));
};
};
Tab.prototype = {
//自动间隔时间切换
autoPlay:function(){
var _this_ = this,
tabItems = this.tabItems, //临时保存tab列表
tabLength = tabItems.size(),//tab的个数
config = this.config;
this.timer = window.setInterval(function(){
_this_.loop++;
if(_this_.loop>=tabLength){
_this_.loop = 0;
};
tabItems.eq(_this_.loop).trigger(config.triggerType)
},config.auto)
},
//事件驱动函数
invoke:function(currentTab){
var _this_ = this;
/***
* 要执行Tab的选中状态，当前选中的加上activd（标记为白底）
* 切换对应的tab内容，要根据配置参数的effect是default还是fade
**/
var index = currentTab.index();
//tab选中状态
currentTab.addClass("actived").siblings().removeClass("actived");
//切换对应的内容区域
var effect = this.config.effect;
var conItems = this.contentItems;
if(effect === "default" || effect != "fade"){
conItems.eq(index).addClass("current").siblings().removeClass("current");
}else if(effect === "fade"){
conItems.eq(index).fadeIn().siblings().fadeOut();
}
//注意：如果配置了自动切换，记得把当前的loop的值设置成当前的tab的index
if(this.config.auto){
this.loop = index;
};
},
//获取配置参数
getConfig:function(){
//拿一下tab elem节点上的data-config
var config = this.tab.attr("data-config");
//console.log(config)
//确保有配置参数
if(config && config!=""){
return $.parseJSON(config);
}else{
return null;
}
}
};
window.Tab = Tab;
})(jQuery);
代码源自慕课网：http://www.imooc.com/learn/825
期待共同学习进步。。。
谢谢
html+css+jQuery+JavaScript实现tab自动切换功能的更多相关文章
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- tabs自动切换功能的实现
<html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...
- jQuery实现用户输入自动完成功能
jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...
- jquery 实现邮箱输入自动提示功能：（二）
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jsp 回车代替tab 自动切换text焦点
方法一keyCode (IE11以后失效) <html> <head> <meta http-equiv="Content-Type" content ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- jquery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- Axure实现Tab选项卡切换功能
这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...
随机推荐
- webshell文件下载器
拥有webshell的服务器可以ping通主机A,这就表明webshell可以向主机A post一些数据. 在主机A上开启一个接受文件的http服务,在webshell中使用文件上传命令进行上传. 主 ...
- Fedora下使用minicom及USB串口线
一.minicom Fedora不像以前的RedHat,不能直接输入minicom回车,因为在目录/dev/下面没有modem这个子目录,而minicom的运行默认是有这个目录的,所以直接敲是不行的. ...
- C语言终极面试及答案分析
第一部分:基本概念及其它问答题 .关键字static的作用是什么? 这个简单的问题很少有人能回答完全.在C语言中,关键字static有三个明显的作用: ). 在函数体,一个被声明为静态的变量在这一函数 ...
- 搞不懂为什么开发人员爱iOS恨Android？
导读:很多网站发表文章大同小异.唯有这个不同点,给大家分享. Android和iOS的较量一直都是人们津津乐道的话题.两个平台各有各的优势所在,同时也都力图能在各个方面赶超对手.对于用户来说,青菜萝卜 ...
- SqlServer 2005 将已存在大量数据的表更改为分区表
一.分区表简介: 使用分区表的主要目的,是为了改善大型表以及具有各种访问模式的表的可伸缩性和可管理性.分区一方面可以将数据分为更小.更易管理的部分,为提高性能起到一定的作用:另一方面,对于如果具有多个 ...
- 【Android】Android模拟器的安装
目录结构: contents structure [+] 使用VMware安装Android模拟器 安装安卓(Android)系统前VMware虚拟机的配置 安装安卓(Android)系统 安装安卓( ...
- 解决servlet-api包冲突问题(maven)
问题描述:本人的项目是用Maven管理,而且用到了servlet3.0的技术,但是项目中用到servlet3.0的地方,总提示找不到类中的方法.很奇怪,在网上找到好多解决办法,综合一下终于解决了.现将 ...
- DSYMTools App Bug 分析工具
1.DSYMTools 简介 DSYMTools 是一个可以解析 iOS Crash 文件的工具. GitHub 下载地址 DSYMTools 其它下载地址 DSYMTools v1.0.5 for ...
- Spring-Boot原理及应用布署
一.Spring Boot的理念 从最根本上来讲,Spring Boot就是一些库的集合,它能够被任意项目的构建系统所使用.简便起见,该框架也提供了命令行界面,它可以用来运行和测试Boot应用.框架的 ...
- 31天重构学习笔记（java版本）
准备下周分享会的内容,无意间看到.net版本的重构31天,花了两个小时看了下,可以看成是Martin Fowler<重构>的精简版 原文地址:http://www.lostechies.c ...