jquery实现tab标签选项卡自动切换效果

时间：2022-11-30 11:51:16
XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jQuery实现的tab标签自动切换效果</title>  
  6. <style type="text/css">  
  7. * {margin:0;padding:0;}  
  8. .main{margin:10px auto;width:500px; line-height:24px;border-left:1px solid #dcdcdc;}.nav{height:20px;line-height:20px;width:500px;}  
  9. .nav span.active {border-bottom:1px solid #fff;position:relative;}  
  10. .nav span{padding:0 10px;float:left;border:1px solid #dcdcdc;border-left:0;cursor:pointer;margin-bottom:-1px;}  
  11. .sho{clear:both;width:500px;border-left:0;border:1px solid #dcdcdc;border-left:0;display:none;height:200px;}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <div class="main">  
  16.     <div class="nav">  
  17.         <span>nav1</span>  
  18.         <span>nav2</span>  
  19.         <span>nav3</span>  
  20.     </div>  
  21.     <div class="sho">1111111111111111111111</div>  
  22.     <div class="sho">2222222222222222222222</div>  
  23.     <div class="sho">3333333333333333333333</div>  
  24. </div>  
  25. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>  
  26. <script type="text/javascript">  
  27.     $(document).ready(function(){  
  28.         $('.nav span:first').addClass('active');  
  29.         $('.sho:first').css('display','block');  
  30.         autoroll();  
  31.         hookThumb();  
  32.     });  
  33.     var i=-1; //第i+1个tab开始  
  34.     var offset = 2500; //轮换时间  
  35.     var timer = null;  
  36.     function autoroll(){  
  37.         n = $('.nav span').length-1;  
  38.         i++;  
  39.         if(i > n){  
  40.             i = 0;  
  41.         }  
  42.         slide(i);  
  43.             timer = window.setTimeout(autoroll, offset);  
  44.     }  
  45.     function slide(i){  
  46.         $('.nav span').eq(i).addClass('active').siblings().removeClass('active');  
  47.         $('.sho').eq(i).css('display','block').siblings('.sho').css('display','none');  
  48.     }  
  49.     function hookThumb(){      
  50.     $('.nav span').hover(  
  51.         function () {  
  52.             if (timer) {  
  53.                 clearTimeout(timer);  
  54.                 i = $(this).prevAll().length;  
  55.                 slide(i);  
  56.                 }  
  57.             },  
  58.         function () {        
  59.             timer = window.setTimeout(autoroll, offset);    
  60.             this.blur();              
  61.             return false;  
  62.         }  
  63.         );  
  64.     }  
  65. </script>  
  66. </body>  
  67. </html>  

 

预览地址：http://www.phplover.cn/demo/5.html


标签：

相关文章