JQuery實現banner圖片的輪播效果

最近在複習jQuery，發現了一個好用的插件，能夠方便地實現不少網站的banner輪播的效果，這個插件就是MyFocus了。

MyFoucus官網：http://demo.jb51.net/js/myfocus/

MyFocus很是小巧，它是一個獨立的JS庫，不須要依賴任何JS庫，用它能夠製做出網上能夠看到的絕大多數輪播效果。下面就來講說

怎麼使用吧：

一、首先到官方下載它的庫文件

二、在HTML的script標籤中引入MyFocus庫文件。

三、在script標籤中引入MyFocus的風格文件

四、link引入對應風格文件的樣式表

五、在頁面當中填充一個圖片的列表(必須包含在一個叫pic的div中)

六、script代碼：

 

<script type="text/javascript">
        myFocus.set({
            id:'picBox'
        })
    </script>

 

下面給出完整的head代碼：

 

<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
    <script src="js/mf-pattern/mF_YSlider.js"></script>
    <link rel="stylesheet" href="js/mf-pattern/mF_YSlider.css">
    <script type="text/javascript">
        myFocus.set({
            id:'picBox'
        })
    </script>

 

 

圖片部分代碼：

 

<div class="ad" id="picBox">
        <div class="loading"><img src="images/loading.gif" alt="加載中"></div>
        <div class="pic">
            <ul>
                <li><img src="images/ad2.jpg" alt=""></li>
                <li><img src="images/ad3.jpg" alt=""></li>
                <li><img src="images/ad4.jpg" alt=""></li>
            </ul>
        </div>
        </div><!--ad-->