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 相关文章推荐
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
微信小程序排坑指南详解
May 23 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
深入理解javascript中的this
Feb 08 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python制作动态字符图的实例
2019/01/27 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
爱情检讨书大全
2014/01/21 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
军训自我鉴定100字
2014/02/13 职场文书
母亲节感恩寄语
2014/02/21 职场文书
公司联欢会策划方案
2014/05/19 职场文书
交通事故代理词范文
2015/05/23 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang