<!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>附上图:
