jQuery myFocus插件(焦点图) 附使用教程

　　myfocus是款功能非常实用的WEB端焦点图和轮换图的JS库；软件可以帮助大家进行制作出许多您需要的焦点图，包括了各种类型的风格效果等；软件还支持进行快速的图片切换，并且和相同种类的软件进行相互比较的话，这款软件的操作更加的流畅，灵活，焦点的功能也是相当的强大，几乎可以和flash的效果差不多，拥有多样化的常用设置，并且非常的小巧，使您这进行软件充斥着的时候，会更加的轻松，自如，需要的朋友可以将jQuery myFocus插件下载来进行使用试试吧！

软件功能

　　myFocus是个专注于焦点图/轮换图制作的JS库，它小巧而且是完全独立的JS库，用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图)，而且制作出的焦点图体积也非常的小(1KB左右)，功能也十分的完备，因为是轻量级，其运行效率也比常见的焦点图要高。

　　最重要的一点是，用myFocus制作出的焦点图使用十分的简单方便，而且每个焦点图的接口/结构都是通用的，这样，只用1~2秒时间就给网站换不同风格的焦点图成为了可能。

　　myFocus的设计理念就是简单易用，无论是多么复杂应用的焦点图。这就意味着，myFocus的所有焦点图都可以轻松的切换风格、更改大小、添加任意多的图片等个性设置以快速的应用到你的网站上。

　　注意是所有，包括带有略缩图风格的焦点图，这或许会带给你前所未有的体验。

软件特色

　　小巧却高效强大

　　myFocus v2.0.min版只有9.89KB，却能使你的网页上可以运行超过30款风格各异的焦点图，在互联网独一无二哦~

　　极其简单的使用

　　无论有多少风格，还是这个风格有多么的牛逼闪闪，都只需加载一个js文件，然后用一句简单的js代码调用，然后……？收工喝茶去……

　　灵活的设置

　　你还想多点折腾？木有问题。myFocus提供了足够多的API让你进行更多个性化的设置，华丽丽的"一秒钟变身"不在话下。

　　独立、免费、开源

　　完全独立，不依赖任何JS库；完全免费，这意味着你可以在任何地方使用；也完全开源，这意味着你可以为myFocus贡献自己的风格代码，提供更多"华丽丽的变身"~

名词解释

　　1、风格应用(pattern)

　　“风格应用”类似MP3播放器的“皮肤”，是基于myFocus库制作的独立文件。

　　每一款“风格应用”都包含了一个js文件，一个css文件，它的名称规则为：

　　常规风格：mF_name；mF表示myFocus，name即是这款风格的名字；

　　带略缩图风格：mF_name_tb；后面的tb表示略缩图(thumb)；

　　自定义结构风格：mF_sd_name；其中sd表示自定义结构(self defined)；

　　myFocus库的默认风格为：'mF_fscreen_tb'，风格应用文件默认放在“pattern”目录。

　　2、“云”获取

　　“云”获取是指myFocus可以根据你的选择，自动引入（载入）相应的风格应用文件，而不需要手动引入。这样，你只需引入myFocus库就可以应用上所有风格，实现“云”换肤。

　　myFocus默认引用的风格路径为“http://www.chhua.com/myfocus/js/pattern/”，即为本站的文件路径。

　　为了更好的管理，你应该把所有(或你需要的)风格应用文件下载到本地/服务器的目录，同时设置myFocus的path参数指向这个目录，即可实现更加安全可靠的“云”换肤。

使用说明

　　比jQuery更简单的方式开发焦点图

　　myFocus从v2.0版本开始，它的API就变成了类似jQuery的模式，即以DOM类为对象，进行链式操作。同时，它也集成了很多方便开发焦点图的方法，让你开发一款焦点图变成一件很简单很惬意的事情。

　　开发之前，建议你先熟悉一下myFocus的开发者API，当然不熟悉也没关系，如果你有一定的jquery/JS基础，你一样可以看的很轻松。

　　一个简单的例子

　　下面以“mF_pconline”这个简单实用的风格作为讲解。

　　建议在开发一款焦点图的时候，先定义好它的html结构和css。由于“mF_pconline”是属于“标准风格”，所以它的html结构已经定义好了：

　　发现它只有图片“.pic”列表，并没有文字/按钮等html元素？Take it easy，myFocus会很方便的生成这些元素，不过为了配合css呈现最终的效果，我们可以先手工加上这些元素，删除loading层并在焦点图div加上对应的class（mF_pconline）：

　　接着定义好它的css：

　　通过这步，我们大概可以在浏览器中看到它最终的静态效果了。到这里我们可以删除那些我们手工添加的html代码（即还原到上面第一个html结构），因为我们可以方便的用js生成。这里，才是真正coding的开始。

　　先为myFocus的pattern类扩展一个名叫“mF_pconline”的风格：

　　默认的pattern扩展函数带了2个参数，一个是调用时的参数集(settings),另一个是全局变量myFocus($)，当然你可以为它们取自己喜欢的名称，这看个人喜好了。

　　接下来，添加我们需要的html结构：

　　在一些焦点图中，因为它的高和宽是可变的，所以相对应的css也是动态的，本例也有一个动态的css属性：焦点图的总高度，它等于设置的高度加上标题的高度。

　　当html和css一切就绪后，我们便可以轮播了，它的方法是play：

　　最后一步，加上按钮控制：

　　最终的代码：

常见问题

　　myFocus兼容性如何？

　　myFocus兼容目前所有的主流浏览器，包括IE6+,FF3.5+,Chrome5.0+等，在各个浏览器中表现基本保持一致，但在一些现代浏览器中可能会体验更好一些，因为它可以支持一些高级别的效果，例如圆角，阴影，CSS缓动等。

　　myFocus可以免费使用、制作其它程序插件吗？

　　myFocus库推崇开源和共享，在保留基本著作信息的前提下可以免费使用、制作附件。

　　如何下载myFocus其中一款风格？

　　myFocus的风格文件全部放在pattern目录中(参看：http://myfocus-js.googlecode.com/svn/trunk/pattern/)，使用前建议全部下载，而不只是下载其中一款。因为myFocus是按需加载，没有用到的风格并不会加载到页面，并且是自动加载你选择的风格。

　　myFocus文件是不是大啊？会不会影响用户访问速度

　　myFocus主库文件(v2.0.min)为9.89KB，而一款风格文件(js+css)大概为3KB左右，这些加起来的体积或许也不够您页面上的一张正常大小的图片，您完全可以放心使用。

　　一个页面多种风格行不行？能在同一个网页里重复使用同一个风格吗？

　　完全可以。每款风格都是独立运行的，但重复过多使用的时候要注意浏览器的性能承受度。

　　能不能刷新网页直接就开始播放啊？怎么设置？

　　设置它的“loadIMGtimeout”为0即可，即不等myFocus的图片加载完就直接播放。

　　请问如何隐藏或是删除图片上的小数字按钮？

　　在对应风格的css文件中，设置它隐藏即可。数字层DIV的class一般为.num，完整结构为：div.num>ul>li>a>数字。

　　如何为每个焦点图的图片绑定自定义事件？为什么直接绑定不行？

　　myFocus在执行代码时会重构DOM树，所以开始直接绑定是不行的，需要在重构完后才能绑定事件，即在myFocus.set(p [,callback])中的callback函数内定义即可。例如:myFocus.set({id:'test'},function(){你自定义事件的代码...}).