本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码。分享给大家供大家参考。具体如下：jQuery实现的右侧选项卡焦点图片轮播动画特效源码，是一段清新可爱的焦点图轮播代码，支持自动轮播与手动点击。运行效果图：

-查看效果-源码下载-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery右侧选项卡焦点图片轮播代码/title/head dylink rel='样式表type=' text/CSS ' href=' CSS/style。CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ var of cus=$(' # focus ')，oRight=oFocus.find ').右)，oLeft=oFocus.find ' .left ')，aRLi=oRight.find('li ')，aLLi=oLeft.find('li ')，index=0，timer=nullarli。单击(function(){ index=$(this)).index() $(this).addClass('active ').兄弟姐妹()。移除CLaSS()；aLLi.eq(指数)。addClass('active ').兄弟姐妹()。移除CLaSS()；aLLi.eq(指数)。停止()。动画({ '不透明度' :1},300)。兄弟姐妹()。停止()。动画({ '不透明度' :0},300);stop foucs()；})oleft。鼠标输入(function(){ stop foucs()；}).mouseleave()函数(){ StartFocus()；});timer=setInterval(function(){ startFocus()；},5000);函数startFocus(){ index；index=index aRLi.size()-1？0 :indexaLLi.eq(指数)。addClass('active ').兄弟姐妹()。移除CLaSS()；aLLi.eq(指数)。停止()。动画({ '不透明度' :1},300)。兄弟姐妹()。停止()。动画({ '不透明度' :0},300);aRLi.eq(指数)。addClass('active ').兄弟姐妹()。移除CLaSS()；}函数stopFoucs(){ clearInterval(计时器);} })/script div class=' focus ' id=' focus ' div class=' left ' ul Li class=' active ' style=' opa city 33601；filter:alpha(不透明度=100);'p图一/pimg src=' http : images/1。jpg/Li lip图二/pimg src=' http : images/2。jpg/Li lip图三/pimg src=' http : images/3。jpg/Li lip图四/pimg src=' http : images/4。jpg '/Li/ul/div=' right ' ul Li class=' active ' I class=' i1 '/I图一/Li Li=' I2 '/I图二/Li Li=' i3 '/I图三/Li Li class=' i4 '/I图四/Li/ul/div/div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；p适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗/pp .来源：a href='//www .JB 51。net/' target=' _ blank '我们/a/p/div/body/html更多精彩内容大家还可以参考《jQuery焦点图特效汇总》 进行学习，希望大家喜欢。

以上就是为大家分享的jQuery右侧选项卡焦点图片轮播代码，希望大家可以喜欢。