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


Posted in Javascript onSeptember 05, 2015

本文实例讲述了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="https://3water.com/" target="_blank">三水点靠木</a></p>
</div>
</body>
</html>

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

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

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 #Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 #Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 #Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 #Javascript
javascript 判断两个日期之差的示例代码
Sep 05 #Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 #Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
综合图片计数器
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Numpy数组的保存与读取方法
2018/04/04 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python Collatz序列实现过程解析
2019/10/12 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
android面试问题与答案
2016/12/27 面试题
军训自我鉴定范文
2014/02/13 职场文书
立志成才演讲稿
2014/09/04 职场文书
2014年幼师工作总结
2014/11/22 职场文书
银行给客户的感谢信
2015/01/23 职场文书