myFocus 焦点图/轮播插件

最近产品突然就来个需求，要加轮播图，而且是立马要上线，于是乎发现了一个超级简便好用的轮播图插件myFocus，而且myFocus提供很多种风格，可以选择。

这里是使用说明 http://www.chhua.com/myfocus/usage.html

需要注意的是，链接上的下载地址现在好像都不能下了，这里提供一个可用的 http://pan.baidu.com/share/link?shareid=3334234060&uk=2770847228&fid=462584438087038

你可以自行看上面，或者看以下内容。

myFocus的标准风格使用，只需简单3步(1.2.0版本开始支持jQuery)：

1、引入js css文件(另外，如果想支持jQuery调用的话，请先引入jQuery库，再引入myFocus库即可)

<link rel="stylesheet" href="{SITE_THEME}js/mf-pattern/mF_fancy.css"/>
<script type="text/javascript" src="{SITE_THEME}js/myfocus-2.0.1.min.js"></script>

2、使用标准的(myFocus)html结构

<div id="boxID" style="visibility:hidden"><!--焦点图盒子-->
  <div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
  <ul class="pic"><!--内容列表-->
        <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
        <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
        <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
        <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
        <li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
  </ul>
</div>

3、调用myfocus

//最基本的(其他范例可以查看上面提供的链接)
<script type="text/javascript">
myFocus.set({
id:'boxID'

}); </script>

然后，就完成了。　　

myFocus可以选择风格，但是会导致加载比较慢。最简单直接的方法，就是直接根据自己的风格加载相应 css js