基于jQuery的淡入淡出可自动切换的幻灯插件
基于jQuery的淡入淡出可自动切换的幻灯插件
发布时间:2016-12-30 来源:查字典编辑
摘要:其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了.插件特点1.参数高度自定义;2.可重复调用且与不影响;3.插件文件小,压缩后仅1....

其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了.

插件特点

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.jb51.net/201008/yuanma/jQuery_iFadeSlide.rar

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类