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)：

一、引入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>

二、使用标准的(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>

三、调用myfocus

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

}); </script>

而后，就完成了。　　

myFocus能够选择风格，可是会致使加载比较慢。最简单直接的方法，就是直接根据本身的风格加载相应 css js