XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jQuery实现的tab标签自动切换效果</title>
- <style type="text/css">
- * {margin:0;padding:0;}
- .main{margin:10px auto;width:500px; line-height:24px;border-left:1px solid #dcdcdc;}.nav{height:20px;line-height:20px;width:500px;}
- .nav span.active {border-bottom:1px solid #fff;position:relative;}
- .nav span{padding:0 10px;float:left;border:1px solid #dcdcdc;border-left:0;cursor:pointer;margin-bottom:-1px;}
- .sho{clear:both;width:500px;border-left:0;border:1px solid #dcdcdc;border-left:0;display:none;height:200px;}
- </style>
- </head>
- <body>
- <div class="main">
- <div class="nav">
- <span>nav1</span>
- <span>nav2</span>
- <span>nav3</span>
- </div>
- <div class="sho">1111111111111111111111</div>
- <div class="sho">2222222222222222222222</div>
- <div class="sho">3333333333333333333333</div>
- </div>
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $('.nav span:first').addClass('active');
- $('.sho:first').css('display','block');
- autoroll();
- hookThumb();
- });
- var i=-1; //第i+1个tab开始
- var offset = 2500; //轮换时间
- var timer = null;
- function autoroll(){
- n = $('.nav span').length-1;
- i++;
- if(i > n){
- i = 0;
- }
- slide(i);
- timer = window.setTimeout(autoroll, offset);
- }
- function slide(i){
- $('.nav span').eq(i).addClass('active').siblings().removeClass('active');
- $('.sho').eq(i).css('display','block').siblings('.sho').css('display','none');
- }
- function hookThumb(){
- $('.nav span').hover(
- function () {
- if (timer) {
- clearTimeout(timer);
- i = $(this).prevAll().length;
- slide(i);
- }
- },
- function () {
- timer = window.setTimeout(autoroll, offset);
- this.blur();
- return false;
- }
- );
- }
- </script>
- </body>
- </html>
预览地址:http://www.phplover.cn/demo/5.html