首页 > 代码库 > 调用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属性值。
这样讲解就算完成了，希望能够帮助到大家。如果有什么问题，或者自己调用没有成功，欢迎提问。
最后，如果需要转载此文章，请注明出处，谢谢！