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下IE与FF兼容函数收集
Sep 17 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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
怎么使 Mysql 数据同步
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
学习jQuey中的return false
2015/12/18 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
编写python代码实现简单抽奖器
2020/10/20 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
nohup的用法
2012/11/26 面试题
什么是servlet
2012/05/08 面试题
高一英语教学反思
2014/01/22 职场文书
记帐员岗位责任制
2014/02/08 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
上课说话检讨书
2015/01/27 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby