JQuery 幻灯片/轮播/焦点图特效(右侧选项卡)

《JQuery 幻灯片/轮播/焦点图特效(右侧选项卡)》正文开始，本次阅读大概1分钟。

今天在写zblog模板的时候需要一个轮播特效，轮播触发部分为右侧选项卡，所以在网上找了一个案例！

案例：http://www.jq22.com/demo/JQueryyj-141111194733/

特效代码：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
htmlxmlns=http://www.w3.org/1999/xhtml
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titlejQuery右侧选项卡焦点图片轮播代码/title
/head
body
linkrel=stylesheettype=text/csshref=css/style.css/
scripttype=text/javascriptsrc=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=indexaRLi.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=focusid=focus
	divclass=left
ul
liclass=activestyle=opacity:1;filter:alpha(opacity=100);p图一/pimgsrc=images/1.jpg//li
lip图二/pimgsrc=images/2.jpg//li
lip图三/pimgsrc=images/3.jpg//li
lip图四/pimgsrc=images/4.jpg//li
/ul
	/div
	divclass=right
ul
liclass=activeiclass=i1/i图一/li
liiclass=i2/i图二/li
liiclass=i3/i图三/li
liiclass=i4/i图四/li
/ul
	/div
/div	
/body
/html

CSS：

@charsetutf-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;}

以上就是整个轮播右侧选项卡切换特效代码！