首页 > 代码库 > 调用MyFocus库,简单实现二十几种轮播效果

调用MyFocus库,简单实现二十几种轮播效果

一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M。

myFocus库有以下的好处:

    a . 文件小巧却高效强大,能够实现二十几种轮播的效果。

    b . 极其简单的使用,只需要调用就可以使用,下面会介绍方法。

    c . 灵活的设置,很多参数可以提供设置,比如不想要文字提示,设置高度为0....更多参数适用请见网站教程页面。

二.下载下来之后,解压,看到一个文件夹,如下图所示:

对此文件夹进行一下说明:a . 打开js文件夹,然后有个js文件,就是我们最开始要调用的myfocus-2.0.1.min.js。

                                  b . 还有一个mf-pattern文件夹,里面放置的就是二十几种轮播效果的js和对应的css文件,调用的时候是需要成对调用的,下面会讲方法和过程。

三.使用方法,(直接调用,可以有很多种效果可供选择,这里以mF_classicHC风格为例),请见下面的html代码:

 1 <html> 2   <head> 3     <title>myFocus</title> 4     <meta charset="utf-8" /> 5     <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><!-- 引入myFocus库文件 --> 6     <script type="text/javascript" src="js/mF_classicHC.js"></script><!-- 引入mF_classicHC风格的js文件 --> 7     <link rel="stylesheet" type="text/css"  href = "style/main.css"><!-- 引入主css文件 --> 8     <link rel="stylesheet" type="text/css" href="style/mF_classicHC.css"><!-- 引入mF_classicHC风格的css文件 --> 9     <script type="text/javascript"><!-- 添加js执行代码 -->10         myFocus.set({id:boxID, pattern:mF_classicHC});<!-- 提供许多参数可以自己设置 -->11     </script>12   </head>13 <body>14 <div id="boxID">15           <div class="loading"><img src="images/pic_banner/loading.gif" alt="请稍等..."></div>16           <div class="pic">17               <ul>18                   <li><img src="images/pic_banner/ad1.jpg" text="这是图片1的说明" /></li>19                   <li><img src="images/pic_banner/ad2.jpg" text="这是图片2的说明" /></li>20                   <li><img src="images/pic_banner/ad3.jpg" text="这是图片3的说明" /></li>21               </ul>22           </div>23   </div>24 </body>25 </html>

上面的代码中需要注意的几点;

    a . 注意引入文件的路径,js和css文件以及图片的路径都需要修改。

    b . 代码第5行:引入myFocus库文件,不可修改。

    c . 代码第6行:引入mF_classicHC风格js文件,可以换成其他风格的js文件。

    d . 代码第7行:引入css主文件,主要定义轮播图片区域(boxID区域)的样式。

    e . 代码第8行:引入mF_classicHC风格css文件,此处和上面的js风格文件相对应。

    f . 代码第9-11行:添加js执行代码;其中的id指轮播区域的id此处为boxID;pattern设置风格值。

    g . 最重要的一点是,boxID部分下面,也就是ul部分外面必须加一个的<div class=‘pic‘>的区域,因为在每个风格的js文件当中需要用到这个值。,所以别忘了,它必不可少。

 四,看到运行效果如下图:

从上图可以看出,运行效果就出来了。然后需要注意的是,下面的文字提示其实就是刚才<li>标签的text属性值。

这样讲解就算完成了,希望能够帮助到大家。如果有什么问题,或者自己调用没有成功,欢迎提问。

最后,如果需要转载此文章,请注明出处,谢谢!