快捷導(dǎo)航

基于jQuery的淡入淡出可自動切換的幻燈插件打包下載

更新時間：2010年09月15日 01:40:09 作者：

基于jQuery淡入淡出可自動切換的幻燈插件,原型是前幾天寫的一個幻燈效果,因為一個小bug卡了兩天,然后清空之前寫的代碼,重新整理思路寫出來的.

思維是個很詭異的東西,一旦陷入某個死角,很難逃出. 惟有冷卻一些時間,完全拋開舊的思維,才能找到新的出路.
其實就是一個幻燈效果,考慮到使用方便,就封裝成一個插件了.

插件特點

1. 參數(shù)高度自定義;
2. 可重復(fù)調(diào)用且與不影響;
3. 插件文件小,壓縮后僅1.04k,開發(fā)版3.29k.

演示及下載

點此查看DEMO
點此下載插件

使用方法
1. 引入jQuery庫文件及jQuery.iFadeSlide.pack.js插件文件(若頁面有其他js文件,可與之合并以減小http請求),引入位置自定義;

復(fù)制代碼代碼如下:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="js/jquery.iFadeSldie.pack.js"></script> 

樣式文件無須引入,若使用DEMO中的結(jié)構(gòu),可直接將樣式合并于項目頁面中.建議樣式自定義.
2. 在頁面中調(diào)用插件并傳入切換元素的參數(shù), 若為空或未傳入的參數(shù),均按插件中的默認(rèn)參數(shù)執(zhí)行.例如如下代碼是DEMO演示中的三組幻燈切換調(diào)用:

復(fù)制代碼代碼如下:

 
$(function(){ 
//SAMPLE-A調(diào)用---未傳入任何參數(shù),調(diào)用默認(rèn)參數(shù) 
$('div#slide').iFadeSlide(); 
//SAMPLE-B調(diào)用---傳入新的參數(shù),將覆蓋原有參數(shù),未傳入的使用默認(rèn)值 
$('div#slide_b').iFadeSlide({ 
field: $('div#slide_b a'), 
icocon:$('div.ico_b'), 
hoverCls: 'high_b', 
curIndex: 2, //索引值0起始,故此處設(shè)置為第3項高亮 
interval: 2000 
}); 
//SAMPLE-C調(diào)用---傳入新的參數(shù),將覆蓋原有參數(shù),未傳入的使用默認(rèn)值 
$('div#slide_c').iFadeSlide({ 
field: $('div#slide_c img'), 
icocon: $('div.ico_c'), 
outTime:100, 
inTime: 200 
}); 
}); 

注意,調(diào)用插件部分須置入插件文件引用后面.
核心代碼

復(fù)制代碼代碼如下:

 
;(function($){ 
$.fn.extend({ 
iFadeSlide: function(options){ 
//插件參數(shù)初始化 
var iset={ 
field:$('div#slide img'), //切換元素集合 
icocon:$('div.ico'), //索引容器 
hoverCls:'high', //切換至當(dāng)前索引高亮顯示樣式 
curIndex:0, //默認(rèn)高亮顯示的索引值,索引值為0起始 
outTime:200, //元素淡出時間(ms) 
inTime:300, //元素淡入時間(ms) 
interval:3000 //元素切換間隔時間(ms) 
}; 
options=options || {}; 
$.extend(iset,options); //合并參數(shù)對象.若options傳入有新值則覆蓋iset中對應(yīng)值,否則使用默認(rèn)值. 
//根據(jù)切換元素量生成對應(yīng)的索引值列表并插入到切換區(qū)域中 
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; 
//淡出淡入函數(shù) 
var fadeFun = function(obj){ 
index = ico.index(obj); //取當(dāng)前索引值 
//淡出當(dāng)前可見元素,并通過索引值找到要淡入的元素 
iset.field.filter(':visible').fadeOut(iset.outTime, function(){ 
iset.field.eq(index).fadeIn(iset.inTime); 
}); 
//為當(dāng)前索引添加高亮樣式并移除同級元素中的高亮樣式 
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset.hoverCls); 
}; 
//切換函數(shù) 
var changeFun = function(){ 
index++; //累積索引值 
if (index == size){index = 0}; //當(dāng)索引值等于切換元素量時,初始化為0 
ico.eq(index).trigger('mouseleave'); //為當(dāng)前的索引模擬鼠標(biāo)劃出元素區(qū)事件 
}; 
//自動切換函數(shù) 
var scrollFun = function(){ 
clearFun = setInterval(function(){ 
changeFun() 
}, iset.interval); 
}; 
//停止自動切換函數(shù) 
var stopFun = function(){ 
clearInterval(clearFun); 
}; 
scrollFun(); //初始自動切換 
//索引區(qū)域鼠標(biāo)劃入停止自動切換并切換元素至當(dāng)前索引,鼠標(biāo)劃出初始化索引至當(dāng)前值(否則鼠標(biāo)劃出切換會亂) 
ico.hover(function(){ 
stopFun(); 
fadeFun(this); 
}, function(){ 
fadeFun(this); 
}).eq(iset.curIndex).mouseleave(); //初始高亮顯示的索引值 
//切換區(qū)域鼠標(biāo)劃入停止自動切換,劃出繼續(xù)自動 
iset.field.hover(function(){ 
stopFun(); 
}, function(){ 
scrollFun(); 
}); 
} 
}); 
})(jQuery); 