一.首先点击这里下载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. Request.UrlReferrer 使用

    最近有一个功能是反馈统计,然后在反馈建议里面添加是从哪个页面点击过来的,一开始打算做成&url=这种方法加在链接里面然后页面接受参数,后来知道了request.UrlReferrer 知道他可 ...

  2. Theano入门神经网络(一)

    Theano是一个Python库,专门用于定义.优化.求值数学表达式,效率高,适用于多维数组.特别适合做机器学习.一般来说,使用时需要安装python和numpy. 首先回顾一下机器学习的东西,定义一 ...

  3. 探秘重编译（Recompilations）（2/2）

    在上一篇文章里,我讨论了使用临时表如何引起SQL Server里的重编译.在文章最后我提到,今天这篇文章我会聚焦表变量(Table Variables)的更多信息,它可以避免重编译的昂贵开销.我们来详 ...

  4. Struts2 源码分析——项目分析

    项目知识点分析 从上一章中我们知道了接下来我们要去了解源码的项目(struts2-showcase).而这一章将讲述我三年后在次接触struts2-showcase项目是一个什么样子的情况.我有一个工 ...

  5. Windows下ELK环境搭建（单机多节点集群部署）

    1.背景 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因.经常分析日志可以了解服务器的负荷,性能安全性,从而及时 ...

  6. shell脚本专题之-----------全自动编译安装mysql

    mysql的编译安装,在博客 开源服务专题之--------mysql的编译安装 中已经说明了,但是还是比较麻烦,尤其是一大堆命令,来手动执行,稍有不慎,就会出错.生产上一般都是先在本地测试环境进行自 ...

  7. DirectShow .Net 实现视频

    DirectShow .Net 实现视频 .获取视频采集设备IBaseFilter接口对象的方法 //获取所有视频设备名称 public ArrayList GetVideoInputDevice() ...

  8. Dapper学习 - Dapper.Rainbow(二) - Update/Delete

    上一篇介绍了Rainbow的Create方法, 这里就来介绍一下Update方法吧, 毕竟新增和修改是双胞兄弟嘛. 一.Update 1. 测试代码: var conStr = Configurati ...

  9. 【工具】清理Windows Installer冗余文件（支持64位NT6.x系统）

    样子: 支持系统: Windows NT 5.x/6.x 32及64位所有系统.需.net framework 2.0运行环境 功能: 清理上述系统中冗余的Windows Installer补丁文件. ...

  10. PHP表单数据写入MySQL代码

    <h1>插入操作</h1> <?php if(!isset($_POST['submit'])){ //如果没有表单提交,显示一个表单 ?> <form ac ...