<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<title>jquery Tab默认情况下自动切换 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>

<!--HTML代码：-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#tabAuto{ width:194px; height:200px; overflow:hidden; border:1px solid #333;}
.tabAuto{ width:196px; overflow:hidden; margin:0; padding:0;}
.tabAuto li{ width:64px; height:22px; float:left; border-right:1px solid #333; border-bottom:1px solid #333;list-style:none; text-align:center; border-bottom:1px solid #333; cursor:pointer;}
.tabAuto li.current{ border-bottom:none;}
.tgh-box{ width:196px; height:176px; overflow:hidden;cursor:pointer;}
.tgh-box div{ width:196px; height:176px;}
</style>

<div id="tabAuto">
<ul class="tabAuto">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tgh-box">
<div>tab1</div>
<div>tab2</div>
<div>tab3</div>
</div>
</div>
<!--script src="tabAuto.js"></script-->
<!-- tabAuto.js如下 -->
<script type="text/javascript">
// JavaScript Document
$(function(){
$(".tabAuto li:first").addClass("current");
$(".tgh-box div").not(":first").hide();
$(".tabAuto li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index = $(".tabAuto li").index(this);
$(".tgh-box div").eq(index).show().siblings().hide();
})
})

//自动轮换代码
$(function(){
$(".tabAuto li:first").addClass("current");
$(".tgh-box div:first").css('display','block');
autoScroll();
contentHover();
currentHover();

});
var i=-1; //第i+1个tab开始;
var offset = 2000; //轮换时间
var timer = null;
function autoScroll(){
var n = $(".tabAuto li").length - 1;
i++;
if(i > n)
i=0;
slide(i);
timer = window.setTimeout(autoScroll,offset);
}
function slide(i){
$(".tabAuto li").eq(i).addClass("current").siblings().removeClass("current");
$(".tgh-box div").eq(i).show().siblings().hide();
}
function currentHover(){
$(".tabAuto li").hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},function(){
timer = window.setTimeout(autoScroll,offset);
this.blur();
return false;
})
}
function contentHover(){
$(".tgh-box div").hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},function(){
timer = window.setTimeout(autoScroll,offset);
this.blur();
return false;
})
}
</script>

附上图:

jquery Tab默认情况下自动切换的更多相关文章

  1. target存放的是编译后的.class文件地方 默认情况下不会讲非class文件放入进入 如果要使用非.class文件 需要通过增加配置方式自动加入文件

    target存放的是编译后的.class文件地方 默认情况下不会讲非class文件放入进入 如果要使用非.class文件 需要通过增加配置方式自动加入文件

  2. 默认情况下，不使用of子句表示在select所有的数据表中加锁(转)

    Select …forupdate语句是我们经常使用手工加锁语句.通常情况下,select语句是不会对数据加锁,妨碍影响其他的DML和DDL操作.同时,在多版本一致读机制的支持下,select语句也不 ...

  3. 使用QFileInfo类获取文件信息（在NTFS文件系统上，出于性能考虑，文件的所有权和权限检查在默认情况下是被禁用的，通过qt_ntfs_permission_lookup开启和操作。absolutePath()必须查询文件系统。而path()函数，可以直接作用于文件名本身，所以，path() 函数的运行会更快）

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Amnes1a/article/details/65444966QFileInfo类为我们提供了系统无 ...

  4. Windows Vista下UIPI和Windows消息的故事（UIPI默认情况下会禁止所有高于WM_USER的消息）

    一. 什么是UIPI UIPI指User Interface Privilege Isolation(用户界面特权隔离),是Windows Vista 新引入的一种安全特性.用于拦截接收比自身进程MI ...

  5. 使用QFileInfo类获取文件信息（文件的所有权和权限检查在默认情况下是被禁用的。要使能这个功能 extern Q_CORE_EXPORT int qt_ntfs_permission_lookup;）

    QFileInfo类为我们提供了系统无关的文件信息,包括文件的名字和在文件系统中位置,文件的访问权限,是否是目录或符合链接,等等.并且,通过这个类,可以修改文件的大小和最后修改.读取时间.同时,QFi ...

  6. Sql Server优化之索引提示----我们为什么需要查询提示，Sql Server默认情况下优化策略选择的不足

    环境: Sql Server2012 SP3企业版,Windows Server2008 标准版 问题由来: 最近在做DB优化的时候,发现一个存储过程有非常严重的性能问题, 由于整个SP整体逻辑是一个 ...

  7. UIView的clipsToBounds属性，layoutSubViews及触摸事件传递（默认情况下）总结

    一.UIView的clipsToBounds属性 * 默认情况下,超出父控件尺寸范围的子控件还是可见的 * 如果设置父控件的clipsToBounds=YES,就会裁剪掉超出父控件尺寸范围内的子控件, ...

  8. [VS] - "包含了重复的“Content”项。.NET SDK 默认情况下包括你项目中的“Content”项。

    copy to :http://www.cnblogs.com/jinzesudawei/p/7376916.html VS 2017 升级至  VS 2017 v15.3 后,.Net Core 1 ...

  9. spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql

    spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql

随机推荐

  1. AST抽象语法树

    抽象语法树简介 (一)简介 抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并 ...

  2. BZOJ 1007 水平可见直线

    Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的.    例如,对于直线:    ...

  3. STL中的Traits编程技法

    最近在看读<STL源码剖析>,看到Traits编程技法这节时,不禁感慨STL源码作者的创新能力.那么什么是Traits编程技法呢?且听我娓娓道来: 我们知道容器的许多操作都是通过迭代器展开 ...

  4. 【转】java 容器类使用 Collection，Map，HashMap，hashTable，TreeMap，List，Vector，ArrayList的区别

    原文网址:http://www.360doc.com/content/15/0427/22/1709014_466468021.shtml java 容器类使用 Collection,Map,Hash ...

  5. 网络编程-pcap数据包格式

    Libpcap的官方网站是http://www.tcpdump.org/,该项目和Tcpdump项目是同一个团队维护.Libpcap是一个平台独立的 数据包捕获开发包,制定了数据包离线存储的事实标准. ...

  6. 服务端调用js：javax.script

    谈起js在服务端的应用,大部分人的第一反应都是node.js.node.js作为一套服务器端的 JavaScript 运行环境,有自己的独到之处,但不是所有的地方都需要使用它. 例如在已有的服务端代码 ...

  7. POJ2286 The Rotation Game（IDA*）

    The Rotation Game Time Limit: 15000MS   Memory Limit: 150000K Total Submissions: 5691   Accepted: 19 ...

  8. 编写Lex和Yacc

    大学课程设计中,有一次是编写Lex(词法分析器的生成器)和Yacc(语法分析器的生成器),编写这类工具软件不是一件容易的事情.这篇文章记录了当时编程时候的主要思想,主要还是编译原理的思想. 准备 Le ...

  9. 《Mathematical Olympiad——组合数学》——染色问题

    恢复  继续关于<Mathematical Olympiad——组合数学>中问题的分析,这一篇文章将介绍有关染色的问题. 问题一: 将一些石头放入10行14列的矩形方格表内,允许在每个单元 ...

  10. 组合数学：容斥原理(HDU1976)

    ●容斥原理所研究的问题是与若干有限集的交.并或差有关的计数. ●在实际中, 有时要计算具有某种性质的元素个数. 例: 某单位举办一个外语培训班, 开设英语, 法语两门课.设U为该单位所有人集合, A, ...