網站焦點圖製作-使用myFocus庫

本文介紹使用myFocus庫製作網站焦點圖

myFocus下載地址

第一步：引入myFocus庫文件

<script src="js/myfocus-2.0.4.full.js" type="text/javascript"></script>
<!-- 引入myFocus庫文件--script標籤最好放在底部 -->

第二步：調用myFocus的myFocus.set函數

<script type="text/javascript">
    myFocus.set({
    id:'boxID',         //焦點圖盒子ID
    pattern:'mF_YSlider',
    //風格應用的名稱，myFocus的mf-pattern文件夾存放的都是風格文件~選擇其中一個名字改掉即可更改風格！
    //time:11,              切換時間間隔(秒)
    //trigger:'click',      觸發切換模式:'click'(點擊)/'mouseover'(懸停)
    //width:200,            設置圖片區域寬度(像素)
    //height:200,           設置圖片區域高度(像素)
    //txtHeight:'default'   文字層高度設置(像素),'default'爲默認高度，0爲隱藏，隱藏圖片的alt文字
    });
</script>       <!-- 調用myFocus函數 -->

第三步：插入焦點圖代碼

<!-- 焦點圖盒子 -->
<div id="boxID">
  <!-- 載入中的Loading圖片(可選) -->
  <div class="loading"><img src="img/loading.gif" alt="請稍候..." /></div>
  <!-- 內容列表 -->
  <div class="pic"> <!-- 使用myFocus時，這個div是必須的，而且必須添加pic類選擇器-->
    <ul>
        <li><a href="#"><img src="img/1.jpg" alt="標題1" /></a></li>
        <li><a href="#"><img src="img/2.jpg" alt="標題2" /></a></li>
        <li><a href="#"><img src="img/3.jpg" alt="標題3" /></a></li>
        <li><a href="#"><img src="img/4.jpg" alt="標題4" /></a></li>
        <li><a href="#"><img src="img/5.jpg" alt="標題5" /></a></li>
        <!-- 你可以根據需要添加更多的列，img標籤的alt屬性是必須的！！！
            有些風格會同時顯示出標題，如果沒寫會顯示出null -->
    </ul>
  </div>
</div>

效果如下：
mF_YSlider風格：左下角顯示alt內容，右下角可手動切換，同時也會自動切換~

---

myFocus的各種風格（存放在mf-pattern文件夾裏面）：

有些風格會讓我們的頁面佈局亂掉

這時修改風格對應的.css文件的背景邊框即可：刪掉padding和border屬性：