案例：/demo/JQueryyj-141111194733/
特效代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>jQuery右侧选项卡焦点图片轮播代码</title></head><body><linkrel="stylesheet"type="text/css"href="css/style.css"/><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript">$(function(){varoFocus=$(#focus),oRight=oFocus.find(.right),oLeft=oFocus.find(.left),aRLi=oRight.find(li),aLLi=oLeft.find(li),index=0,timer=null;aRLi.click(function(){index=$(this).index()$(this).addClass(active).siblings().removeClass();aLLi.eq(index).addClass(active).siblings().removeClass();aLLi.eq(index).stop().animate({opacity:1},300).siblings().stop().animate({opacity:0},300);stopFoucs();})oLeft.mouseenter(function(){stopFoucs();}).mouseleave(function(){startFocus();});timer=setInterval(function(){startFocus();},5000);functionstartFocus(){index++;index=index>aRLi.size()-1?0:index;aLLi.eq(index).addClass(active).siblings().removeClass();aLLi.eq(index).stop().animate({opacity:1},300).siblings().stop().animate({opacity:0},300);aRLi.eq(index).addClass(active).siblings().removeClass();}functionstopFoucs(){clearInterval(timer);}})</script><divclass="focus"id="focus"><divclass="left"><ul><liclass="active"style="opacity:1;filter:alpha(opacity=100);"><p>图一</p><imgsrc="images/1.jpg"/></li><li><p>图二</p><imgsrc="images/2.jpg"/></li><li><p>图三</p><imgsrc="images/3.jpg"/></li><li><p>图四</p><imgsrc="images/4.jpg"/></li></ul></div><divclass="right"><ul><liclass="active"><iclass="i1"></i>图一</li><li><iclass="i2"></i>图二</li><li><iclass="i3"></i>图三</li><li><iclass="i4"></i>图四</li></ul></div></div></body></html>
CSS：
@charset"utf-8";/*CSSDocument*/*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{background:#fff;color:#333;font-weight:500;font-family:MicrosoftYahei;}.focus{height:415px;width:980px;margin:40pxauto0auto;}.focus.left{float:left;width:680px;height:415px;position:relative;overflow:hidden;}.focus.leftli{position:absolute;left:0;top:0;width:842px;height:415px;z-index:1;opacity:0;filter:alpha(opacity=0);}.focus.leftli.active{z-index:2;}.focus.leftlip{display:none;}.focus.right{float:right;width:282px;}.focus.rightli{height:88px;overflow:hidden;padding-left:10px;background-image:url(../images/btns.png);background-position:-120px0;color:#33cccc;font-size:24px;line-height:88px;margin-bottom:21px;cursor:pointer;}.focus.rightli:hover,.focus.rightli.active{color:#fff;background-position:-120px-120px;}.focus.rightlii{background-image:url(../images/btns.png);background-repeat:no-repeat;width:60px;height:60px;float:left;margin:15px19px0px0;}.focus.rightlii.i1{background-position:00;}.focus.rightlii.i2{background-position:0-60px;}.focus.rightlii.i3{background-position:0-120px;}.focus.rightlii.i4{background-position:0-180px;}.focus.rightli:hoveri.i1,.focus.rightli.activei.i1{background-position:-60px0;}.focus.rightli:hoveri.i2,.focus.rightli.activei.i2{background-position:-60px-60px;}.focus.rightli:hoveri.i3,.focus.rightli.activei.i3{background-position:-60px-120px;}.focus.rightli:hoveri.i4,.focus.rightli.activei.i4{background-position:-60px-180px;}
以上就是整个轮播右侧选项卡切换特效代码！
