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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
json 实例详细说明教程
Oct 31 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
AngularJS转换响应内容
Jan 27 Javascript
原生js编写焦点图效果
Dec 08 Javascript
原生js实现回复评论功能
Jan 18 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
javascript实现简单打字游戏
Oct 29 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
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python自定义简单图轴简单实例
2018/01/08 Python
深入浅析Python的类
2018/06/22 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python mysql中in参数化说明
2020/06/05 Python
python如何更新包
2020/06/11 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
销售自荐信
2013/10/22 职场文书
大学新生欢迎词
2014/01/10 职场文书
团队经理竞聘书
2014/03/31 职场文书
企业挂职心得体会
2014/09/10 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
详解redis在微服务领域的贡献
2021/10/16 Redis