<!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. 关于html5

    html5   是用来  将 js  和 css  结合起来 从而实现 各种功能 javascript 用来定义 html5   页面的逻辑 css 来定义 html5 中的显示样式

  2. 最新game

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <signal.h&g ...

  3. Hash unique和Sort unique

    SQL> set linesize 200 SQL> set pagesize 200 SQL> set autot trace SQL> select distinct de ...

  4. Unity 使用BMFont制作字体

    参考链接:http://blog.csdn.net/huang9012/article/details/32333913,作者:CSDN huang9012 NGUI版本:3.6.5 要自己制作字体, ...

  5. ZOJ-2112-Dynamic Rankings(线段树套splay树)

    题意: 完成两个操作: 1.询问一个区间里第k小的数: 2.修改数列中一个数的值. 分析: 线段树套平衡树,线段树中的每个节点都有一棵平衡树,维护线段树所记录的这个区间的元素.这样处理空间上是O(nl ...

  6. Redis Sentinel实现Failover

    redis版本:2.8.17   服务器规划: 10.50.13.34(6379 master) 10.50.13.35(6379 slave) 10.50.13.36(6379 slave) 10. ...

  7. Light OJ 1018 - Brush (IV)

    题目大意:     一个二维平面上有N个点,一把刷子,刷一次可以把一条线上的所有点都刷掉.问最少刷多少次,可以把全部的点都刷完 状态压缩DP, 用记忆化搜索来写, 需要有个优化不然会超时. ===== ...

  8. Eclipse启动jboss局域网无法访问的问题

    在启动jboss的时候加上参数 -b 0.0.0.0(本地用localhost也能访问,用ip也能访问)

  9. 使用 HTMLTestRunner.py

    HTMLTestRunner.py python 2版本 下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html 教程:http://www. ...

  10. weak属性需要在dealloc中置nil么？

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 不需要. 在ARC环境无论是强指针还是 ...