一.首先点击这里下载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="data:images/pic_banner/loading.gif" alt="请稍等..."></div>

           <div class="pic">

               <ul>

                   <li><img src="data:images/pic_banner/ad1.jpg" text="这是图片1的说明" /></li>

                   <li><img src="data:images/pic_banner/ad2.jpg" text="这是图片2的说明" /></li>

                   <li><img src="data: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属性值。

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

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

调用MyFocus库，简单实现二十几种轮播效果的更多相关文章

  1. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  2. viewPager+Handler+Timer简单实现广告轮播效果

    基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...

  3. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  4. C++调用C#库简单例程

    有些时候,为了使用别人已经写好的C#库文件,我们需要使用C++调用C#库文件: 以下做了一简单的调用工程,步骤如下: 1.准备C#库 (dll文件)   1)创建C#库:     2)编写C#类:   ...

  5. 二十五种网页加速方法和seo优化技巧

    一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <e ...

  6. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  7. onethink插件二（首页图片轮播）

    2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响 ...

  8. 使用python3调用MyQR库生成动态二维码（附源代码）

    可生成普通二维码.带图片的艺术二维码(黑白与彩色).动态二维码(黑白与彩色). GitHub:https://github.com/sylnsfar/qrcode 中文版:https://github ...

  9. （转） c/c++调用libcurl库发送http请求的两种基本用法

    libcurl主要提供了两种发送http请求的方式,分别是Easy interface方式和multi interface方式,前者是采用阻塞的方式发送单条数据,后者采用组合的方式可以一次性发送多条数 ...

随机推荐

  1. java接口的应用举例

    /* 接口的理解: 接口就是前期定义一个规则!某一个类A,为了扩展自身的功能,对外提供这个接口,后期只要是符合这个接口(规则) 的类(这个类是接口的子类),将子类对象的引用传递给类A中方法(方法中的参 ...

  2. SQL*Loader之CASE11

    CASE11 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase11.sql set termout off rem host write sys$output &q ...

  3. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  4. [Node.js] 使用TypeScript编写Node项目

    原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 Ty ...

  5. MySQL修改默认字符集

    今天朋友在做某个程序项目时,需要修改MySQL修改默认字符集,搞不好找我帮忙.百度了试了好几篇博文中的方法,最后终于成功了.但是感觉那些博文思路有点乱,所以自己总结下,希望可以帮到遇到同样问题的人. ...

  6. 网络编程之socket新解

    由于工作并不是很忙,闲暇之余就读了下tomcat的源代码.我是从事java服务器开发工作的,大体的一些服务器线程模型我都是了解的.其大部分都是由一个线程调用监听端口等待客户端的链接,建立连接后再交由其 ...

  7. [New Portal]Windows Azure Virtual Machine (23) 使用Storage Space,提高Virtual Machine磁盘的IOPS

    <Windows Azure Platform 系列文章目录> 注意:如果使用Azure Virtual Machine,虚拟机所在的存储账号建议使用Local Redundant.不建议 ...

  8. File Type Icons – 免费扁平设计风格文件类型图标集

    这套扁平风格图标集包含一组62个不同的文件类型图标,有 AI,ICO和 PNG 三种格式.他们采用长阴影模式的扁平化设计,看起来非常整齐和现代化.这些图标是完全免费的,可以用于商业项目. 您可能感兴趣 ...

  9. child-selector解释

    这个伪类选择器应该叫孩子选择器,意思是选择网页中所有父节点的第一个子节点,并且这第一个子字节点必须是指定标签元素 写法有 :first-child :last-child :nth-child(odd ...

  10. jQuery uploadify在谷歌和火狐浏览器下无法上传

    原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...