myFocus(js焦點(diǎn)圖插件)

myFocus插件是一款包含了30多種不同風(fēng)格圖片的焦點(diǎn)圖插件！可以在多種主流瀏覽器環(huán)境下安裝使用。支持不同圖片在線相互切換操作，達(dá)到了傻瓜式的Flash焦點(diǎn)輪換效果！需要的用戶(hù)歡迎來(lái)綠色資源網(wǎng)下載使用。

軟件介紹

myFocus是一個(gè)專(zhuān)注于WEB端焦點(diǎn)圖輪換圖的JS庫(kù)。該焦點(diǎn)圖插件集成了30多種風(fēng)格圖片切換效果，體積小，使用簡(jiǎn)單，兼容ie6+和所有的主流瀏覽器。適用瀏覽器：ie8、360、firefox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

myFocus焦點(diǎn)圖插件特點(diǎn)

1.原生JS編寫(xiě)，獨(dú)立無(wú)依賴(lài)性能卓越

2.同樣效果比JQuery更流暢簡(jiǎn)單易用

3.傻瓜式API和標(biāo)準(zhǔn)HTML結(jié)構(gòu)效果華麗

4.媲美Flash焦點(diǎn)圖功能強(qiáng)大，30多種風(fēng)格切換

5.支持N種常用設(shè)置體積小巧，僅5.93KB（minified & gzipped）支持 IE6+ / Chrome / Firefox 等現(xiàn)代瀏覽器支持自定義開(kāi)發(fā)擴(kuò)展

操作使用說(shuō)明：

在頁(yè)面中引入樣式文件myfocus-2.0.4.min.js文件。

HTML結(jié)構(gòu)

myFocus焦點(diǎn)圖的HTML結(jié)構(gòu)如下：

img標(biāo)簽的屬性說(shuō)明：

src：圖片地址thumb： 圖片的略縮圖地址（需要風(fēng)格支持，可以省略，如果省略即把大圖地址作為它的地址）

alt： 圖片的描述文字text：圖片更詳細(xì)的描述文字（需要風(fēng)格支持，可以省略）

初始化插件

可以通過(guò)下面的方法來(lái)初始化myFocus焦點(diǎn)圖插件。

或者在初始化時(shí)設(shè)置配置參數(shù)：

myFocus插件常見(jiàn)問(wèn)題

1.myFocus可以免費(fèi)使用、制作其它程序插件嗎？

myFocus庫(kù)推崇開(kāi)源和共享，在保留基本著作信息的前提下可以免費(fèi)使用、制作附件。

2.myFocus兼容性如何？

myFocus兼容目前所有的主流瀏覽器，包括IE6+,FF3.5+,Chrome5.0+等，而且在各個(gè)瀏覽器中的表現(xiàn)效果保持一致。

3.如何下載myFocus其中一款風(fēng)格？

myFocus的風(fēng)格文件全部放在pattern目錄中，使用前建議全部下載，而不只是下載其中一款。因?yàn)閙yFocus是按需加載，沒(méi)有用到的風(fēng)格并不會(huì)加載到頁(yè)面，并且是自動(dòng)加載你選擇的風(fēng)格。

4.打開(kāi)焦點(diǎn)圖瞬間它撐大了頁(yè)面造成體驗(yàn)不好，怎么修正？

建議在焦點(diǎn)圖的div上加上：style="visibility:hidden"，這樣可以在一定程度上解決閃動(dòng)（感謝網(wǎng)友kin1987提供的方案）。

也可以考慮在CSS中定義焦點(diǎn)圖的大小，即自定義一個(gè)class或在對(duì)應(yīng)風(fēng)格的class里定義width和heigh值；或干脆在它的div上直接定義其大小，例如：<div id="myFocus" style="width:450px;height:296px;overflow:hidden;">…</div>。

另外，還可以把焦點(diǎn)圖的所有內(nèi)容放置在一個(gè)獨(dú)立的html頁(yè)面，再用iframe標(biāo)簽把它引進(jìn)來(lái)?；蛟S，這樣對(duì)焦點(diǎn)圖的SEO來(lái)說(shuō)會(huì)不太好，但這樣卻是解決這個(gè)問(wèn)題的最有效方法。

最后提供一個(gè)小技巧設(shè)置。在結(jié)構(gòu)復(fù)雜、引用文件較多的頁(yè)面設(shè)置myFocus時(shí)，可以在相應(yīng)的DIV結(jié)構(gòu)下面這樣調(diào)用myFocus.set（{你的參數(shù)設(shè)置},true），后面多加了一個(gè)true參數(shù)是為了讓它立即執(zhí)行，這樣就減少了可能的延遲造成頁(yè)面的凌亂。