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