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