基于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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
javascript基本语法分析说明
Jun 15 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 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
在线增减.htpasswd内的用户
2006/10/09 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
php json相关函数用法示例
2017/03/28 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
canvas实现钟表效果
2017/02/13 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python实现AES加密和解密
2019/03/27 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python 19个值得学习的编程技巧
2020/08/15 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
揭牌仪式主持词
2014/03/19 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
死亡赔偿协议书
2015/01/28 职场文书
实验室安全管理制度
2015/08/05 职场文书
学校团代会开幕词
2016/03/04 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
深入理解go slice结构
2021/09/15 Golang
JavaScript实例 ODO List分析
2022/01/22 Javascript