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中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
Yii2中简单的场景使用介绍
2017/06/02 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
详解python中的json的基本使用方法
2016/12/21 Python
基于Python实现用户管理系统
2019/02/26 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
两道JAVA笔试题
2016/09/14 面试题
大学四年个人的自我评价
2014/02/26 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
学前教育专业求职信
2014/09/02 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
单位租房协议范本
2014/12/03 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
2016中秋节广告语
2016/01/28 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers