更新 1.2版本 刪除回調(diào)函數(shù)的控制臺輸出調(diào)試，因為在IE6下沒有控制臺會造成插件出錯， 完成build功能。 提示信息按鈕支持多個，此版本為最新的穩(wěn)定版。

近期將會提供更加詳細的data書寫格式說明，build時html格式說明，詳細的options參數(shù)說明。補充內(nèi)容類型的切換展示案例。

Introduction:

jquery imageShown 插件可以完成多種形式的內(nèi)容輪顯切換， 所有我提供的Demo中雖然都是導(dǎo)航帶動的輪顯圖片，但是它還能完成內(nèi)容的切換，即可以完成Tab功能，單純的圖片輪顯功能，新聞信息的輪顯。 也就是說這個插件在使用合理參數(shù)的配合下可以顯示任何形式的內(nèi)容。

此插件可以在上下左右四個方向上顯示導(dǎo)航，背景滑動動畫可以獨立設(shè)置，播放區(qū)域動畫可以獨立設(shè)置，每次進入顯示區(qū)域?qū)Ш綌?shù)量可以獨立設(shè)置，如果設(shè)置錯誤或者設(shè)置不合理會被插件內(nèi)部重置。提示信息是否顯示，以及顯示動畫可以獨立設(shè)置。具體請參考Demo相關(guān)內(nèi)容。

注：在使用Tab功能時需要設(shè)置 pContent為 content 并且由于由于顯示區(qū)域已經(jīng)被固定大小，所以針對未知大小的內(nèi)容請在callback函數(shù)中處理。

插件內(nèi)部已經(jīng)對請求的資源是否存在做了判斷，例如出現(xiàn)錯誤你可以直接顯示參數(shù)中你提供默認顯示信息，同時你也可以在callback函數(shù)中對這個錯誤區(qū)域進行處理。callback函數(shù)你可以接收回傳的參數(shù)。

回傳參數(shù)的說明：

id //當(dāng)前Dom的ID，在你頁面未設(shè)置ID的情況下這個ID會是插件自動生成的唯一值。 
total //輪顯內(nèi)容的數(shù)量 
/* 
當(dāng)前選擇的第一個內(nèi)容區(qū)域，當(dāng)你loop設(shè)置為false時此內(nèi)容就是頁面Dom中的index值，當(dāng)loop為true時導(dǎo)航區(qū)域需要根據(jù) attr('data-index')來獲取當(dāng)前的index。player區(qū)域不受loop限制，永遠為當(dāng)前內(nèi)容的index值 
*/ 
selected 
curNav//當(dāng)前導(dǎo)航，可以通過 attr('data-missing')來確認內(nèi)容是否正常加載。 
curPlay//當(dāng)前顯示的主要內(nèi)容，可以通過 attr('data-missing')來確認內(nèi)容是否正常加載。 
curData//你傳入數(shù)據(jù)data的當(dāng)前值。 

下一步開發(fā)計劃：

當(dāng)你不愿意或者不會使用data參數(shù)時，你可以講需要顯示的內(nèi)容按照固定格式寫入html頁面，然后使用 build命令由插件自行完成余下內(nèi)容

例如：

$('elem').imageShown('bulid'); 
$('elem').imageShown('bulid',{'options'}); 
$('elem').imageShown('bulid','option','value'); 

提供外部暫停和重啟自動播放的接口，方便你能夠在回調(diào)函數(shù)中進行使用。 提供更多的說明和示例。

默認參數(shù)：

id: null,
navSpace: 47,
pWidth: 0 ,
pHeight:0 ,
navNum: 4,
navPlace: null,
autoPlay: true,
autoTime: 4000,
events: 'mouseenter',
tbgAnimate: true,
tbgSpeed: 'fast',
addtional:false,
step: 1,
scrollSpeed:'fast',
opacity:0.6,
data: null,
loop: true,
player: true,
animate: 'fade',//left,right,top,bottom,fade,none
//deepNav: false,
showTips: true,
tipsAnimate: 'fade',//fade,slide
selected: 1,
callback: null,
preload: true,
target: '_blank',
pSpeed:500,
pType: false,
tContent:'image',//num,none,image,content
listPlace:null,
tipsBtn:false,
loadClass: 'img-player-loading',
pContent:'image'

使用方法：

$('elem').imageShown({'options'}); 

setter:

$('elem').imageShown('option',{'options'}); 
$('elem').imageShown('option','option','value'); 

getter

var option = $('elem').imageShown('option','option name'); 

在build功能完成之后將提供更加相信的參數(shù)以及配置的說明。

同時buid將會以擴展的形式發(fā)布，即需要使用build功能時，需要引入另外的文件。這樣做的目的是為了解決文件大小問題。

插件經(jīng)過非常多的暴虐暫時沒發(fā)現(xiàn)問題，性能上已經(jīng)處理的很好，經(jīng)過測試暫時未發(fā)現(xiàn)內(nèi)存泄露問題。測試平臺：ie6，firefox3.6， windows2003

以上所述是小編給大家介紹的jQuery插件支持同一頁面被多次調(diào)用的全部敘述，希望對大家有所幫助。

最新評論