jQuery右侧选项卡焦点图片轮播特效代码分享 - Web前端

作者：98wpeu发布时间：2026-08-09分类：网页前端技术浏览：2

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

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

----------------------查看效果-源码下载----------------------

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

<!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右侧选项卡焦点图片轮播代码</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> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'microsoft YaHei';">
<p>适用浏览器：ie8、360、firefox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.jb51.net/" target="_blank">脚本之家</a></p>
</div>
</body>
</html>

更多精彩内容大家还可以参考《jQuery焦点图特效汇总》进行学习，希望大家喜欢。

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

标签：选项卡特效代码焦点图片 Web jQuery

上一篇：jQuery 1.9.1源码分析系列（十五)之动画处理 - Web前端
下一篇：自定义刻度jQuery进度条及插件 - Web前端

jQuery右侧选项卡焦点图片轮播特效代码分享 - Web前端

相关推荐