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 相关文章推荐
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
微信小程序如何使用云开发
May 17 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
详解vue3中组件的非兼容变更
Mar 03 Vue.js
仅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
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
python使用pil生成图片验证码的方法
2015/05/08 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python安装与使用redis的方法
2016/04/19 Python
Python如何获取系统iops示例代码
2016/09/06 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
安全员岗位职责
2013/11/11 职场文书
项目专员岗位职责
2013/12/04 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
2014信息公开实施方案
2014/02/22 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python