效果图：


<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>jqueryswitchable图片轮播</title><linkrel='stylesheet'href='css/reset.css'><styletype="text/css">.ui-switchable{margin:0pxauto;width:690px;height:260px;border:1pxsolid;overflow:hidden;}.ui-switchableul{position:relative;width:130px;top:-260px;left:560px;}.ui-switchableullia{display:block;width:130px;height:33px;background:#fff;color:#666;text-align:center;letter-spacing:1px;line-height:33px;}.ui-switchableullia.cur{background:#AA0000;color:#fff;text-decoration:underline;}.ui-switchable-content-wrapper{width:560px;height:260px;position:relative;}.ui-switchable.ui-switchable-content{width:0px;height:0px;position:relative;}</style><scripttype="text/javascript"src='http://code.jquery.com/jquery-latest.min.js'></script><scripttype="text/javascript">(function($){$.fn.Switchable=function(config){varself,li,a,content,fn,cur,firstImg,curIndex=0,len=0;var_cfg={effect:'fade'};var_config=$.extend({},_cfg,config);self=this;li=$('ulli',self);a=$('a',li);len=li.length;firstImg=a.eq(0);content=$("<divclass='ui-switchable-content-wrapper'><imgclass='ui-switchable-content'></img></div>");//展示第一张图片content.prependTo($(self)).find('img').attr('src',firstImg.attr('imgsrc'));show(curIndex);fn=setInterval(show,4000);a.bind('click',function(){curIndex=a.index($(this));show();});a.bind({'mouseenter':function(){clearInterval(fn);},'mouseleave':function(){fn=setInterval(show,4000);}});functionshow(){cur=$('ullia',self).eq(curIndex);varsrc=cur.attr('imgsrc');cur.addClass('cur').parent().siblings().find('a').removeClass('cur');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(){});curIndex==len-1?curIndex=0:curIndex++;};};})(jQuery);</script></head><body><divid='demo1'class='ui-switchable'><ul><li><ahref='#'imgsrc='p_w_picpaths/01.JPG'>9折话费</a></li><li><ahref='#'imgsrc='p_w_picpaths/02.JPG'>年终风暴</a></li><li><ahref='#'imgsrc='p_w_picpaths/03.JPG'>item3</a></li><li><ahref='#'imgsrc='p_w_picpaths/04.JPG'>item4</a></li><li><ahref='#'imgsrc='p_w_picpaths/01.JPG'>item5</a></li><li><ahref='#'imgsrc='p_w_picpaths/02.JPG'>item6</a></li><li><ahref='#'imgsrc='p_w_picpaths/03.JPG'>item7</a></li><li><ahref='#'imgsrc='p_w_picpaths/04.JPG'>item8</a></li></ul></div><scripttype="text/javascript">$(function(){$('#demo1').Switchable();});</script></body></html>