演示Demo : http://ethanzhu.github.com/jq.imageShown/Demo.html
演示的Demo中主要提供了幾家視屏網站的廣告示例,(搜狐 奇藝 迅雷 QQ視屏)
更新 1.2版本 刪除回調函數的控制臺輸出調試,因為在IE6下沒有控制臺會造成插件出錯, 完成build功能。 提示信息按鈕支持多個,此版本為***的穩定版。
近期將會提供更加詳細的data書寫格式說明,build時html格式說明,詳細的options參數說明。補充內容類型的切換展示案例。
Introduction:
jquery imageShown 插件可以完成多種形式的內容輪顯切換, 所有我提供的Demo中雖然都是導航帶動的輪顯圖片,但是它還能完成內容的切換,即可以完成Tab功能,單純的圖片輪顯功能,新聞信息的輪顯。 也就是說這個插件在使用合理參數的配合下可以顯示任何形式的內容。
此插件可以在上下左右四個方向上顯示導航,背景滑動動畫可以獨立設置,播放區域動畫可以獨立設置,每次進入顯示區域導航數量可以獨立設置,如果設置錯誤或者設置不合理會被插件內部重置。提示信息是否顯示,以及顯示動畫可以獨立設置。具體請參考Demo相關內容。
注:在使用Tab功能時需要設置 pContent為 content 并且由于由于顯示區域已經被固定大小,所以針對未知大小的內容請在callback函數中處理。
插件內部已經對請求的資源是否存在做了判斷,例如出現錯誤你可以直接顯示參數中你提供默認顯示信息,同時你也可以在callback函數中對這個錯誤區域進行處理。callback函數你可以接收回傳的參數。
回傳參數的說明:
- id //當前Dom的ID,在你頁面未設置ID的情況下這個ID會是插件自動生成的唯一值。
- total //輪顯內容的數量
- /*
- 當前選擇的***個內容區域,當你loop設置為false時此內容就是頁面Dom中的index值,當loop為true時導航區域需要根據 attr('data-index')來獲取當前的index。player區域不受loop限制,永遠為當前內容的index值
- */
- selected
- curNav//當前導航,可以通過 attr('data-missing')來確認內容是否正常加載。
- curPlay//當前顯示的主要內容,可以通過 attr('data-missing')來確認內容是否正常加載。
- curData//你傳入數據data的當前值。
下一步開發計劃:
當你不愿意或者不會使用data參數時,你可以講需要顯示的內容按照固定格式寫入html頁面,然后使用 build命令由插件自行完成余下內容
例如:
- $('elem').imageShown('bulid');
- $('elem').imageShown('bulid',{'options'});
- $('elem').imageShown('bulid','option','value');
提供外部暫停和重啟自動播放的接口,方便你能夠在回調函數中進行使用。 提供更多的說明和示例。
默認參數:
- 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功能完成之后將提供更加相信的參數以及配置的說明。
同時buid將會以擴展的形式發布,即需要使用build功能時,需要引入另外的文件。這樣做的目的是為了解決文件大小問題。
插件經過非常多的暴虐暫時沒發現問題,性能上已經處理的很好,經過測試暫時未發現內存泄露問題。測試平臺:ie6,firefox3.6, windows2003
歡迎您能夠給我提出寶貴的意見。
Future:
計劃在播放區域內加入上一張,下一張按鈕。(只在計劃中,暫未具體實施。)