<!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. ASP.NET MVC 定义JsonpResult实现跨域请求

    1:原理 在js中,XMLHttpRequest是不能请求不同域的数据,但是script标签却可以,所以可以用script标签实现跨域请求.具体是定义一个函数,例如jsonp1234,请求不同域的ur ...

  2. 2661: [BeiJing wc2012]连连看

    Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规则是,给出一个闭区间[a,b]中的全部整数,如果其中某两个数x,y( ...

  3. One git command may cause you hacked(CVE-2014-9390)

    0x00 背景 CVE-2014-9390是最近很火的一个漏洞,一个git命令就可能导致你被黑,我不打算深入探讨这个漏洞的细节,官方已经在https://github.com/blog/1938-gi ...

  4. Js Framework

    http://www.mhtml5.com/2012/06/5119.html http://www.mhtml5.com/2012/06/5118.html http://cubiq.org/isc ...

  5. 【Linux】鸟哥的Linux私房菜基础学习篇整理（二）

    1. dumpe2fs [-bh] devicename:查询superblock信息.参数:-b:列出保留为坏道的部分:-h:列出superblock的数据,不会列出其他的区段内容. 2. df [ ...

  6. Git各种错误汇总

    1.github上版本和本地上版本冲突的方法,即提交时会提示如下错误: 解决方法,提交时采用如下代码: git push -u origin master -f 参考链接: http://blog.c ...

  7. 「Poetize6」Candle

    描述 蜡烛商店中有10种蜡烛,形状分别是0~9这10个数字,不过对于每种蜡烛,商店的存货量仅有一根.另外,忘川沧月已经有了一个"+"形状的蜡烛.忘川沧月想购买一些蜡烛,使得他的家族 ...

  8. CH Round #48 - Streaming #3 (NOIP模拟赛Day1)

    A.数三角形 题目:http://www.contesthunter.org/contest/CH%20Round%20%2348%20-%20Streaming%20%233%20(NOIP模拟赛D ...

  9. -_-#【jsonp】cache

    Cache jQuery’s JSONP Calls <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3 ...

  10. AC自动机：BZOJ 2434 阿狸的打字机

    2434: [Noi2011]阿狸的打字机 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1834  Solved: 1053[Submit][Sta ...