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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
javascript canvas API内容整理
Feb 16 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
Javascript - HTML的request类
2006/07/15 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python requests post多层字典的方法
2018/12/27 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
学习型党组织心得体会
2014/09/12 职场文书
测量员岗位职责
2015/02/14 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书