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学习网址备忘
May 29 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
jquery实现数字输入框
Feb 22 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python异步存储数据详解
2019/03/19 Python
Python中bisect的使用方法
2019/12/31 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
String这个类型的class为何定义成final?
2012/11/13 面试题
品牌推广策划方案
2014/05/28 职场文书
2014年财政工作总结
2014/12/10 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
python基础之//、/与%的区别详解
2022/06/10 Python
python manim实现排序算法动画示例
2022/08/14 Python