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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
JSON取值前判断
Dec 23 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
详解Vue之事件处理
Jul 10 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
小程序实现密码输入框
Nov 16 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
PHP实现取得HTTP请求的原文
2014/08/18 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
js原型链原理看图说明
2012/07/07 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
pandas去除重复列的实现方法
2019/01/29 Python
python3实现微型的web服务器
2019/09/03 Python
如何使用python进行pdf文件分割
2019/11/11 Python
django实现类似触发器的功能
2019/11/15 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
如何用Python徒手写线性回归
2021/01/25 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
家长给学校的建议书
2014/05/15 职场文书
节约用水的口号
2014/06/20 职场文书
群众路线领导对照材料
2014/08/23 职场文书
党员四风剖析材料
2014/08/27 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技