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 getElementsByTagName的简写方式
Jun 27 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
浅谈angular2路由预加载策略
Oct 04 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
javascript 构建模块化开发过程解析
Sep 11 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的无限分类实现想法~
2007/01/02 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Vue官方文档梳理之全局配置
2017/11/22 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
利用js canvas实现五子棋游戏
2020/10/11 Javascript
python3 打开外部程序及关闭的示例
2018/11/06 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Django celery异步任务实现代码示例
2020/11/26 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
离婚案件原告代理词
2015/05/23 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript