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插件制作 学习过程及实例
Apr 25 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
关于vue 结合原生js 解决echarts resize问题
Jul 26 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生成随机密码的三种方法小结
2010/09/04 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python整数对象实现原理详解
2019/07/01 Python
python批量修改ssh密码的实现
2019/08/08 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
美国渔具店:FishUSA
2019/08/07 全球购物
2015年度绩效考核工作总结
2015/05/27 职场文书
导师鉴定意见
2015/06/05 职场文书
谢师宴家长致辞
2015/07/27 职场文书