<!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. 删除svn文件

    删除svn文件 sudo find . -name ".DS_Store" -exec rm -r {} \; sudo find . -name ".git" ...

  2. Linux下软件的安装

    想必linux新手刚开始对于linux软件安装很茫然吧,不知到怎么安装,软件到底安装在哪里,如果我需要删除软件怎么删除,配置文件到哪里去找. 想学习linux的话,最快上手的应该是Ubuntu,它特有 ...

  3. Web NFC API

    W3C Editor's Draft 29 December 2014 This version: http://www.w3.org/2012/nfc/web-api/ Latest publish ...

  4. runAllManagedModulesForAllRequests 和 invalid url

    有这样的经验, 在本地的 IIS 上网站运行正常,但是发布到服务器上就一堆怪怪的问题 : MVC routing not work http://stackoverflow.com/questions ...

  5. unity3d中的http通信 二

    转载自 http://www.cnblogs.com/88999660/archive/2013/03/11/2954279.html 如果侵权,请及时通知我删除! using System; usi ...

  6. linux 修改目录文件权限，目录文件所属用户，用户组

    1:查看命令:ll drwxr-xr-x  4 gamer ftp      4096 Mar  7 16:56 gstore drwxrwxrwx 10 root  ftp      4096 De ...

  7. libevent带负载均衡的多线程使用示例

    功能: 主线程根据负载工作线程负载均衡算法,每隔一秒钟向特定的工作线程发送一条字符串信息,工作线程简单的把字符串信息打开出来.   Makefile   eventtest : eventtest.c ...

  8. Java 利用SWFUpload多文件上传 session 为空失效，不能验证的问题 swfUpload多文件上传

    Java 利用SWFUpload多文件上传 session 为空失效,不能验证的问题(转) 我们都知道普通的文件上传是通过表单进行文件上传的,还不能达到异步上传的目的.通过使用某些技术手段,比如jqu ...

  9. 线性规划||网络流(费用流)：COGS 288. [NOI2008] 志愿者招募

    [NOI2008] 志愿者招募 输入文件:employee.in   输出文件:employee.out   简单对比 时间限制:2 s   内存限制:512 MB [问题描述] 申奥成功后,布布经过 ...

  10. 从JavaScript的移位运算看数字在计算机内部的编码——补码

    偶然看到一个JavaScript的题目: js中13>>2=?      -13>>2=? 在浏览器中很容易测试出答案分别是 3 和 -4. 13>>2 = 3 很 ...