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代码
Aug 25 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
7个jQuery最佳实践
Jan 12 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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操作数组的一些函数整理介绍
2011/07/17 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
详解用python写一个抽奖程序
2019/05/10 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python使用xpath实现图片爬取
2020/09/16 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
公司活动策划方案
2014/01/13 职场文书
2015年元旦活动总结
2014/05/09 职场文书
职务任命书范本
2014/06/05 职场文书
销售员岗位职责
2014/06/09 职场文书
英语投诉信范文
2015/07/03 职场文书
客户答谢会致辞
2015/07/30 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang