建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
插件下載： http://ethanzhu.github.com/jq.imageShown/
創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供寶坻企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為寶坻眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
演示Demo : http://ethanzhu.github.com/jq.imageShown/Demo.html
演示的Demo中主要提供了幾家視屏網(wǎng)站的廣告示例，（搜狐 奇藝 迅雷 QQ視屏）
更新 1.2版本 刪除回調(diào)函數(shù)的控制臺(tái)輸出調(diào)試，因?yàn)樵贗E6下沒(méi)有控制臺(tái)會(huì)造成插件出錯(cuò)， 完成build功能。 提示信息按鈕支持多個(gè)，此版本為***的穩(wěn)定版。
近期將會(huì)提供更加詳細(xì)的data書(shū)寫(xiě)格式說(shuō)明，build時(shí)html格式說(shuō)明，詳細(xì)的options參數(shù)說(shuō)明。補(bǔ)充內(nèi)容類(lèi)型的切換展示案例。
Introduction:
jquery imageShown 插件可以完成多種形式的內(nèi)容輪顯切換， 所有我提供的Demo中雖然都是導(dǎo)航帶動(dòng)的輪顯圖片，但是它還能完成內(nèi)容的切換，即可以完成Tab功能，單純的圖片輪顯功能，新聞信息的輪顯。 也就是說(shuō)這個(gè)插件在使用合理參數(shù)的配合下可以顯示任何形式的內(nèi)容。
此插件可以在上下左右四個(gè)方向上顯示導(dǎo)航，背景滑動(dòng)動(dòng)畫(huà)可以獨(dú)立設(shè)置，播放區(qū)域動(dòng)畫(huà)可以獨(dú)立設(shè)置，每次進(jìn)入顯示區(qū)域?qū)Ш綌?shù)量可以獨(dú)立設(shè)置，如果設(shè)置錯(cuò)誤或者設(shè)置不合理會(huì)被插件內(nèi)部重置。提示信息是否顯示，以及顯示動(dòng)畫(huà)可以獨(dú)立設(shè)置。具體請(qǐng)參考Demo相關(guān)內(nèi)容。
注：在使用Tab功能時(shí)需要設(shè)置 pContent為 content 并且由于由于顯示區(qū)域已經(jīng)被固定大小，所以針對(duì)未知大小的內(nèi)容請(qǐng)?jiān)赾allback函數(shù)中處理。
插件內(nèi)部已經(jīng)對(duì)請(qǐng)求的資源是否存在做了判斷，例如出現(xiàn)錯(cuò)誤你可以直接顯示參數(shù)中你提供默認(rèn)顯示信息，同時(shí)你也可以在callback函數(shù)中對(duì)這個(gè)錯(cuò)誤區(qū)域進(jìn)行處理。callback函數(shù)你可以接收回傳的參數(shù)。
回傳參數(shù)的說(shuō)明：
- id //當(dāng)前Dom的ID，在你頁(yè)面未設(shè)置ID的情況下這個(gè)ID會(huì)是插件自動(dòng)生成的唯一值。
- total //輪顯內(nèi)容的數(shù)量
- /*
- 當(dāng)前選擇的***個(gè)內(nèi)容區(qū)域，當(dāng)你loop設(shè)置為false時(shí)此內(nèi)容就是頁(yè)面Dom中的index值，當(dāng)loop為true時(shí)導(dǎo)航區(qū)域需要根據(jù) attr('data-index')來(lái)獲取當(dāng)前的index。player區(qū)域不受loop限制，永遠(yuǎn)為當(dāng)前內(nèi)容的index值
- */
- selected
- curNav//當(dāng)前導(dǎo)航，可以通過(guò) attr('data-missing')來(lái)確認(rèn)內(nèi)容是否正常加載。
- curPlay//當(dāng)前顯示的主要內(nèi)容，可以通過(guò) attr('data-missing')來(lái)確認(rèn)內(nèi)容是否正常加載。
- curData//你傳入數(shù)據(jù)data的當(dāng)前值。
下一步開(kāi)發(fā)計(jì)劃：
當(dāng)你不愿意或者不會(huì)使用data參數(shù)時(shí)，你可以講需要顯示的內(nèi)容按照固定格式寫(xiě)入html頁(yè)面，然后使用 build命令由插件自行完成余下內(nèi)容
例如：
- $('elem').imageShown('bulid');
- $('elem').imageShown('bulid',{'options'});
- $('elem').imageShown('bulid','option','value');
提供外部暫停和重啟自動(dòng)播放的接口，方便你能夠在回調(diào)函數(shù)中進(jìn)行使用。 提供更多的說(shuō)明和示例。
默認(rèn)參數(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ù)以及配置的說(shuō)明。
同時(shí)buid將會(huì)以擴(kuò)展的形式發(fā)布，即需要使用build功能時(shí)，需要引入另外的文件。這樣做的目的是為了解決文件大小問(wèn)題。
插件經(jīng)過(guò)非常多的暴虐暫時(shí)沒(méi)發(fā)現(xiàn)問(wèn)題，性能上已經(jīng)處理的很好，經(jīng)過(guò)測(cè)試暫時(shí)未發(fā)現(xiàn)內(nèi)存泄露問(wèn)題。測(cè)試平臺(tái)：ie6，firefox3.6， windows2003
歡迎您能夠給我提出寶貴的意見(jiàn)。
Future：
計(jì)劃在播放區(qū)域內(nèi)加入上一張，下一張按鈕。（只在計(jì)劃中，暫未具體實(shí)施。）
新聞名稱(chēng)：支持同一頁(yè)面多次使用的jQuery插件
分享地址：http://www.5511xx.com/article/djgpigg.html
