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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
openLayer4实现动态改变标注图标
Aug 17 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
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
opencv 阈值分割的具体使用
2020/07/08 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
科室工作的个人自我评价
2013/10/30 职场文书
会计专业自荐信
2013/12/02 职场文书
劳资专员岗位职责
2013/12/27 职场文书
成语的广告词
2014/03/19 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
教学质量月活动总结
2015/05/11 职场文书
晚会开场白和结束语
2015/05/29 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Python基础 括号()[]{}的详解
2021/11/07 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers