雅星娱乐:基于jQuery的淡入淡出可自动切换的幻灯

时间: 作者:方业

  

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

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

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

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

  
  
  
  
样式文件无须引入,若使用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 = "

    ";  
    iset.field.each(function(i){  
    ulcon = ulcon + '
  • ' + (i + 1) + '
  • ';  
    });  
    ulcon += '
';  
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);  
  
其他  
本插件可自由使用,包括任何形式的商业用途,但使用时请勿必注明版权归属.

  
欢迎提出疑问及建议, 并期待对本插件扩展. (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 雅星娱乐 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 雅星娱乐