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 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
仅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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python控制台中实现进度条功能
2015/11/10 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
建龙钢铁面试总结
2014/04/15 面试题
一套Delphi的笔试题一
2016/02/14 面试题
运动会广播稿100字
2014/01/11 职场文书
交通事故检查书范文
2014/01/30 职场文书
七年级历史教学反思
2014/02/05 职场文书
环保倡议书500字
2014/05/15 职场文书
倡议书格式
2014/08/30 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
大学学生会辞职信
2015/05/13 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书