您的位置：首页 > 其它

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

2014-07-19 22:07 543 查看

一.首先点击这里下载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代码：

<html>
<head>
<title>myFocus</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><!-- 引入myFocus库文件 -->
<script type="text/javascript" src="js/mF_classicHC.js"></script><!-- 引入mF_classicHC风格的js文件 -->
<link rel="stylesheet" type="text/css"  href = "style/main.css"><!-- 引入主css文件 -->
<link rel="stylesheet" type="text/css" href="style/mF_classicHC.css"><!-- 引入mF_classicHC风格的css文件 -->
<script type="text/javascript"><!-- 添加js执行代码 -->
myFocus.set({id:'boxID', pattern:'mF_classicHC'});<!-- 提供许多参数可以自己设置 -->
</script>
</head>
<body>
<div id="boxID">
<div class="loading"><img src="images/pic_banner/loading.gif" alt="请稍等..."></div>
<div class="pic">
<ul>
<li><img src="images/pic_banner/ad1.jpg" text="这是图片1的说明" /></li>
<li><img src="images/pic_banner/ad2.jpg" text="这是图片2的说明" /></li>
<li><img src="images/pic_banner/ad3.jpg" text="这是图片3的说明" /></li>
</ul>
</div>
</div>
</body>
</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属性值。

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航