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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
Javascript中的变量使用说明
May 18 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
javascript实现简单的Map示例介绍
2013/12/23 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
javascript的BOM汇总
2015/07/16 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Python字典简介以及用法详解
2016/11/15 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
大型活动策划方案
2014/01/12 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS