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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
JavaScript实现网页留言板功能
Nov 23 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
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
django model去掉unique_together报错的解决方案
2016/10/18 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
sort命令的作用和用法
2012/11/04 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
简短证婚人证婚词
2014/01/09 职场文书
认购协议书范本
2014/04/22 职场文书
设计专业自荐信
2014/06/19 职场文书
学校联谊协议书
2014/09/16 职场文书
财务部岗位职责
2015/02/03 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
《司马光》教学反思
2016/02/22 职场文书
Python Parser的用法
2021/05/12 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技