基于jQuery的淡入淡出可自动切换的幻灯插件打包下载


Posted in Javascript onSeptember 15, 2010

思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路.
其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了.

插件特点

1. 参数高度自定义;
2. 可重复调用且与不影响;
3. 插件文件小,压缩后仅1.04k,开发版3.29k.

演示及下载

点此查看DEMO
点此下载插件

使用方法
1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="js/jquery.iFadeSldie.pack.js"></script>

样式文件无须引入,若使用DEMO中的结构,可直接将样式合并于项目页面中.建议样式自定义.
2. 在页面中调用插件并传入切换元素的参数, 若为空或未传入的参数,均按插件中的默认参数执行.例如如下代码是DEMO演示中的三组幻灯切换调用:
$(function(){ 
//SAMPLE-A调用---未传入任何参数,调用默认参数 
$('div#slide').iFadeSlide(); 
//SAMPLE-B调用---传入新的参数,将覆盖原有参数,未传入的使用默认值 
$('div#slide_b').iFadeSlide({ 
field: $('div#slide_b a'), 
icocon:$('div.ico_b'), 
hoverCls: 'high_b', 
curIndex: 2, //索引值0起始,故此处设置为第3项高亮 
interval: 2000 
}); 
//SAMPLE-C调用---传入新的参数,将覆盖原有参数,未传入的使用默认值 
$('div#slide_c').iFadeSlide({ 
field: $('div#slide_c img'), 
icocon: $('div.ico_c'), 
outTime:100, 
inTime: 200 
}); 
});

注意,调用插件部分须置入插件文件引用后面.
核心代码
;(function($){ 
$.fn.extend({ 
iFadeSlide: function(options){ 
//插件参数初始化 
var iset={ 
field:$('div#slide img'), //切换元素集合 
icocon:$('div.ico'), //索引容器 
hoverCls:'high', //切换至当前索引高亮显示样式 
curIndex:0, //默认高亮显示的索引值,索引值为0起始 
outTime:200, //元素淡出时间(ms) 
inTime:300, //元素淡入时间(ms) 
interval:3000 //元素切换间隔时间(ms) 
}; 
options=options || {}; 
$.extend(iset,options); //合并参数对象.若options传入有新值则覆盖iset中对应值,否则使用默认值. 
//根据切换元素量生成对应的索引值列表并插入到切换区域中 
var ulcon = "<ul>"; 
iset.field.each(function(i){ 
ulcon = ulcon + '<li>' + (i + 1) + '</li>'; 
}); 
ulcon += '</ul>'; 
iset.icocon.append(ulcon); 
var ico = iset.icocon.find('li'); //索引列表集合 
var size = iset.field.size(); //切换元素量 
var index = 0; //初始索引值 
var clearFun=null; 
//淡出淡入函数 
var fadeFun = function(obj){ 
index = ico.index(obj); //取当前索引值 
//淡出当前可见元素,并通过索引值找到要淡入的元素 
iset.field.filter(':visible').fadeOut(iset.outTime, function(){ 
iset.field.eq(index).fadeIn(iset.inTime); 
}); 
//为当前索引添加高亮样式并移除同级元素中的高亮样式 
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset.hoverCls); 
}; 
//切换函数 
var changeFun = function(){ 
index++; //累积索引值 
if (index == size){index = 0}; //当索引值等于切换元素量时,初始化为0 
ico.eq(index).trigger('mouseleave'); //为当前的索引模拟鼠标划出元素区事件 
}; 
//自动切换函数 
var scrollFun = function(){ 
clearFun = setInterval(function(){ 
changeFun() 
}, iset.interval); 
}; 
//停止自动切换函数 
var stopFun = function(){ 
clearInterval(clearFun); 
}; 
scrollFun(); //初始自动切换 
//索引区域鼠标划入停止自动切换并切换元素至当前索引,鼠标划出初始化索引至当前值(否则鼠标划出切换会乱) 
ico.hover(function(){ 
stopFun(); 
fadeFun(this); 
}, function(){ 
fadeFun(this); 
}).eq(iset.curIndex).mouseleave(); //初始高亮显示的索引值 
//切换区域鼠标划入停止自动切换,划出继续自动 
iset.field.hover(function(){ 
stopFun(); 
}, function(){ 
scrollFun(); 
}); 
} 
}); 
})(jQuery);
Javascript 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
基于JQuery的简单实现折叠菜单代码
Sep 15 #Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 #Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 #Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 #Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 #Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 #Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 #Javascript
You might like
几个php应用技巧
2008/03/27 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP new static 和 new self详解
2017/02/19 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python中的is和id用法分析
2015/01/26 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
应届毕业生求职信范文
2013/12/18 职场文书
六十大寿答谢词
2014/01/12 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
员工福利申请报告
2015/05/15 职场文书
2016国培研修心得体会
2016/01/08 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
pycharm debug 断点调试心得分享
2021/04/16 Python