其實就是一個幻燈效果,考慮到使用方便,就封裝成一個插件了.
插件特點
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