效果图:

效果图


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