效果图：

jquery图片轮播_第1张图片


    
    
    
    
    
     
     
     
     
  1. > 
    2. 
     
     
     
     
  2. <html> 
    3. 
     
     
     
     
  3. <head> 
    4. 
     
     
     
     
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5. 
     
     
     
     
  5. <title>jquery switchable图片轮播title> 
    6. 
     
     
     
     
  6. <link rel='stylesheet' href='css/reset.css'> 
    7. 
     
     
     
     
  7. <style type="text/css"> 
    8. 
     
     
     
     
  8. .ui-switchable{ 
    9. 
     
     
     
     
  9.     margin:0px auto; 
    10. 
     
     
     
     
  10.     width:690px;  
    11. 
     
     
     
     
  11.     height:260px; 
    12. 
     
     
     
     
  12.     border: 1px solid; 
    13. 
     
     
     
     
  13.     overflow: hidden;    
    14. 
     
     
     
     
  14. } 
    15. 
     
     
     
     
  15. .ui-switchable ul{ 
    16. 
     
     
     
     
  16.     position: relative;  
    17. 
     
     
     
     
  17.  width:130px; 
    18. 
     
     
     
     
  18.  top:-260px; 
    19. 
     
     
     
     
  19.  left:560px; 
    20. 
     
     
     
     
  20. } 
    21. 
     
     
     
     
  21. .ui-switchable ul li a{ 
    22. 
     
     
     
     
  22.     display: block; 
    23. 
     
     
     
     
  23.     width:130px; 
    24. 
     
     
     
     
  24.     height:33px; 
    25. 
     
     
     
     
  25.     background:#fff; 
    26. 
     
     
     
     
  26.     color:#666; 
    27. 
     
     
     
     
  27.     text-align: center; 
    28. 
     
     
     
     
  28.     letter-spacing: 1px; 
    29. 
     
     
     
     
  29.     line-height: 33px; 
    30. 
     
     
     
     
  30. } 
    31. 
     
     
     
     
  31. .ui-switchable ul li a.cur{ 
    32. 
     
     
     
     
  32.     background: #AA0000; 
    33. 
     
     
     
     
  33.     color:#fff; 
    34. 
     
     
     
     
  34.     text-decoration: underline; 
    35. 
     
     
     
     
  35. } 
    36. 
     
     
     
     
  36. .ui-switchable-content-wrapper{ 
    37. 
     
     
     
     
  37.     width:560px; 
    38. 
     
     
     
     
  38.     height:260px; 
    39. 
     
     
     
     
  39.     position: relative; 
    40. 
     
     
     
     
  40. } 
    41. 
     
     
     
     
  41. .ui-switchable .ui-switchable-content{ 
    42. 
     
     
     
     
  42.     width:0px; 
    43. 
     
     
     
     
  43.     height:0px; 
    44. 
     
     
     
     
  44.     position: relative; 
    45. 
     
     
     
     
  45. } 
    46. 
     
     
     
     
  46. style> 
    47. 
     
     
     
     
  47. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'>script> 
    48. 
     
     
     
     
  48. <script type="text/javascript"> 
    49. 
     
     
     
     
  49. (function($){ 
    50. 
     
     
     
     
  50.     $.fn.Switchable = function(config){ 
    51. 
     
     
     
     
  51.         var self,li,a,content,fn,cur,firstImg,curIndex = 0,len = 0;  
    52. 
     
     
     
     
  52.         var _cfg = {effect:'fade'}; 
    53. 
     
     
     
     
  53.         var _config = $.extend({},_cfg,config); 
    54. 
     
     
     
     
  54.         self = this;     
    55. 
     
     
     
     
  55.         li = $('ul li',self); 
    56. 
     
     
     
     
  56.         a = $('a',li); 
    57. 
     
     
     
     
  57.         len = li.length; 
    58. 
     
     
     
     
  58.         firstImg = a.eq(0); 
    59. 
     
     
     
     
  59.         content = $("<div class='ui-switchable-content-wrapper'><img class='ui-switchable-content'>img>div>"); 
    60. 
     
     
     
     
  60.         //展示第一张图片 
    61. 
     
     
     
     
  61.         content.prependTo($(self)).find('img').attr('src',firstImg.attr('imgsrc'));  
    62. 
     
     
     
     
  62.         show(curIndex); 
    63. 
     
     
     
     
  63.         fn = setInterval(show,4000); 
    64. 
     
     
     
     
  64.         a.bind('click',function(){ 
    65. 
     
     
     
     
  65.             curIndex = a.index($(this)); 
    66. 
     
     
     
     
  66.             show(); 
    67. 
     
     
     
     
  67.         }); 
    68. 
     
     
     
     
  68.         a.bind({ 
    69. 
     
     
     
     
  69.             'mouseenter':function(){ 
    70. 
     
     
     
     
  70.                 clearInterval(fn); 
    71. 
     
     
     
     
  71.              },'mouseleave':function(){ 
    72. 
     
     
     
     
  72.                  fn = setInterval(show,4000); 
    73. 
     
     
     
     
  73.              } 
    74. 
     
     
     
     
  74.         }); 
    75. 
     
     
     
     
  75.          
    76. 
     
     
     
     
  76.         function show(){ 
    77. 
     
     
     
     
  77.             cur = $('ul li a',self).eq(curIndex); 
    78. 
     
     
     
     
  78.             var src = cur.attr('imgsrc'); 
    79. 
     
     
     
     
  79.             cur.addClass('cur').parent().siblings().find('a').removeClass('cur'); 
    80. 
     
     
     
     
  80.             content.find('img').attr('src',src).css({width:'0px',height:'0px',left:'280px',top:'130px'}).animate({width:'560px',height:'260px',left:'0px',top:'0px'},300,function(){ 
    81. 
     
     
     
     
  81.  
    82. 
     
     
     
     
  82.             }); 
    83. 
     
     
     
     
  83.             curIndex == len-1? curIndex=0:curIndex++; 
    84. 
     
     
     
     
  84.         }; 
    85. 
     
     
     
     
  85.     }; 
    86. 
     
     
     
     
  86. })(jQuery); 
    87. 
     
     
     
     
  87. script> 
    88. 
     
     
     
     
  88. head> 
    89. 
     
     
     
     
  89. <body> 
    90. 
     
     
     
     
  90. <div id='demo1' class='ui-switchable'> 
    91. 
     
     
     
     
  91.     <ul> 
    92. 
     
     
     
     
  92.         <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>9折话费a>li> 
    93. 
     
     
     
     
  93.         <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>年终风暴a>li> 
    94. 
     
     
     
     
  94.         <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item3a>li> 
    95. 
     
     
     
     
  95.         <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item4a>li> 
    96. 
     
     
     
     
  96.         <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>item5a>li> 
    97. 
     
     
     
     
  97.         <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>item6a>li> 
    98. 
     
     
     
     
  98.         <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item7a>li> 
    99. 
     
     
     
     
  99.         <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item8a>li> 
    100. 
     
     
     
     
  100.     ul> 
    101. 
     
     
     
     
  101. div> 
    102. 
     
     
     
     
  102. <script type="text/javascript"> 
    103. 
     
     
     
     
  103. $(function(){ 
    104. 
     
     
     
     
  104.     $('#demo1').Switchable(); 
    105. 
     
     
     
     
  105. }); 
    106. 
     
     
     
     
  106. script> 
    107. 
     
     
     
     
  107. body> 
    108. 
     
     
     
     
  108. html> 
    109.