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


Posted in Javascript onAugust 24, 2010

其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了.
插件特点
1. 参数高度自定义;
2. 可重复调用且与不影响;
3. 插件文件小,压缩后仅1.04k,开发版3.29k.
演示及下载 

使用方法
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);

其他
本插件可自由使用,包括任何形式的商业用途,但使用时请勿必注明版权归属.
欢迎提出疑问及建议, 并期待对本插件扩展.

测试文件打包下载 http://xiazai.3water.com/201008/yuanma/jQuery_iFadeSlide.rar

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
js null,undefined,字符串小结
Aug 21 #Javascript
javascript中的float运算精度实例分析
Aug 21 #Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 #Javascript
jquery插件之easing 动态菜单
Aug 21 #Javascript
url地址自动加#号问题说明
Aug 21 #Javascript
jquery中输入验证中一个不错的效果
Aug 21 #Javascript
单独使用CKFinder选择图片的方法
Aug 21 #Javascript
You might like
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php通过字符串调用函数示例
2014/03/02 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Python中with及contextlib的用法详解
2017/06/08 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python使用tornado实现登录和登出
2018/07/28 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
公司周年庆活动方案
2014/08/25 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
计算机实训报告范文
2014/11/05 职场文书
英语复习计划
2015/01/19 职场文书
房租涨价通知
2015/04/23 职场文书
单位介绍信格式范文
2015/05/04 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
导游词之吉林花园山
2019/10/17 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang