jQuery 图片切换插件(代码比较少)


Posted in Javascript onMay 07, 2012
// JavaScript Document 
;(function($){ 
$.fn.extend({ 
"zj_ppt":function(value){ //默认参数定义 
var $this = $(this); 
value = $.extend({ 
"time":2000, //间隔变化动画时间 
"con":0, 
"sto":true, 
"count":"count", //切换小图的父级class名字 
"src":"src", //切换小图片路径 
"src_cur":"src_cur" //当前切换小图片路径 
},value); 
//图片切换函数 
function autopic(){ 
$("li",$this[0]).hide(); 
$("li:eq("+value.con+")",$this[0]).show(); 
$(value.count).find("ul li img").attr("src",value.src); 
$(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur); 
if(value.con>$("li",$this[0]).length-2){ 
value.con = 0; 
}else{ 
value.con += 1; 
} 
} 
//每间隔多少时间执行一次图片切换 
function sett(){ 
if(value.sto){autopic()}; 
setTimeout(sett,value.time); 
} 
//鼠标悬停时切换图片,并停止自动切换 
$(value.count).find("ul li").hover(function(){ 
var _index = $(this).index(); 
value.con = _index; 
value.sto = false; 
autopic(); 
},function(){ 
var _index = $(this).index(); 
value.sto = true; 
value.con = _index; 
}); 
sett(); 
//反回原对像,以便连缀JQuery的其它方法 
return $this; 
} 
}); 
})(jQuery);

以上是插件部分代码;

下面可以下载demo /201205/yuanma/myPPT_3water.rar

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
js验证框架实现代码分享
May 18 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 #Javascript
js查错流程归纳
May 04 #Javascript
iphone safari不支持position fixed的解决方法
May 04 #Javascript
JavaScript之自定义类型
May 04 #Javascript
Javascript 键盘事件的组合使用实现代码
May 04 #Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 #Javascript
jQuery 开发者应该注意的9个错误
May 03 #Javascript
You might like
简单的PHP多图上传小程序代码
2011/07/17 PHP
php include和require的区别深入解析
2013/06/17 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php微信公众平台开发类实例
2015/04/01 PHP
html下载本地
2006/06/19 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
英语生日邀请函
2014/01/23 职场文书
企业元宵节主持词
2014/03/25 职场文书
书香家庭事迹材料
2014/05/09 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
导游词之太湖
2019/10/08 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server