今天在寫(xiě)zblog模板的時(shí)候需要一個(gè)輪播特效，輪播觸發(fā)部分為右側(cè)選項(xiàng)卡，所以在網(wǎng)上找了一個(gè)案例！
案例：http://www.jq22.com/demo/JQueryyj-141111194733/
特效代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播代碼</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var oFocus=$('#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);
function startFocus(){
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();
}
function stopFoucs(){
clearInterval(timer);
}
})
</script>
<div class="focus" id="focus">
<div class="left">
<ul>
<li class="active" style="opacity:1; filter:alpha(opacity=100);"><p>圖一</p><img src="images/1.jpg"/></li>
<li><p>圖二</p><img src="images/2.jpg"/></li>
<li><p>圖三</p><img src="images/3.jpg"/></li>
<li><p>圖四</p><img src="images/4.jpg"/></li>
</ul>
</div>
<div class="right">
<ul>
<li class="active"><i class="i1"></i>圖一</li>
<li><i class="i2"></i>圖二</li>
<li><i class="i3"></i>圖三</li>
<li><i class="i4"></i>圖四</li>
</ul>
</div>
</div>
</body>
</html>CSS：
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#fff; color:#333;font-weight:500; font-family:'Microsoft Yahei';}
.focus{height:415px;width:980px;margin:40px auto 0 auto;}
.focus .left{float:left; width:680px; height:415px; position:relative;overflow:hidden;}
.focus .left li{position:absolute; left:0; top:0; width:842px; height:415px; z-index:1; opacity:0; filter:alpha(opacity=0);}
.focus .left li.active{z-index:2;}
.focus .left li p{display:none;}
.focus .right{float:right; width:282px;}
.focus .right li{height:88px; overflow:hidden; padding-left:10px;background-image:url(../images/btns.png);background-position:-120px 0; color:#33cccc; font-size:24px; line-height:88px; margin-bottom:21px;cursor: pointer;}
.focus .right li:hover,.focus .right li.active{color:#fff;background-position:-120px -120px; }
.focus .right li i{background-image:url(../images/btns.png); background-repeat:no-repeat; width:60px; height:60px; float:left; margin:15px 19px 0px 0;}
.focus .right li i.i1{background-position:0 0;}
.focus .right li i.i2{background-position:0 -60px;}
.focus .right li i.i3{background-position:0 -120px;}
.focus .right li i.i4{background-position:0 -180px;}
.focus .right li:hover i.i1,.focus .right li.active i.i1{background-position:-60px 0;}
.focus .right li:hover i.i2,.focus .right li.active i.i2{background-position:-60px -60px;}
.focus .right li:hover i.i3,.focus .right li.active i.i3{background-position:-60px -120px;}
.focus .right li:hover i.i4,.focus .right li.active i.i4{background-position:-60px -180px;}以上就是整個(gè)輪播右側(cè)選項(xiàng)卡切換特效代碼！