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 ui 1.7更新小结
Aug 15 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
KnockoutJs快速入门教程
May 16 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
详解vue路由
Aug 05 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 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
PHP的开合式多级菜单程序
2006/10/09 PHP
php一个找二层目录的小东东
2012/08/02 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
原生JavaScript实现滚动条效果
2020/03/24 Javascript
详解vue axios中文文档
2017/09/12 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python 经典数字滤波实例
2019/12/16 Python
python实现双色球随机选号
2020/01/01 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
加油口号大全
2014/06/13 职场文书
道路施工安全责任书
2014/07/24 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers