一.首先点击这里下载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. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  2. Java Class文件详解

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) Java Class文件中包含以下信息: [+]view code ClassFile { u4 magic;  ...

  3. Elasticsearch之_default_—— 为索引添加默认映射

    前篇说过,ES可以自动为文档设定索引.但是问题也来了——如果默认设置的索引不是我们想要的,该怎么办呢? 要知道ES这种搜索引擎都是以Index为实际的分区,Index里面包含了不同的类型,不同的类型是 ...

  4. 我如何调优SQL Server查询

    我是个懒人,我只想干尽可能少的活.当我干活的时候我不想太多.是,你没看错,这看起来很糟糕,作为一个DBA这很不合格.但在今天的文章里,我想给你展示下,当你想对特定查询创建索引设计时,你如何把你的工作和 ...

  5. Struts2 源码分析——Hello world

    新建第一个应用程序 上一章我们讲到了关于struts2核心机制.对于程序员来讲比较概念的一章.而本章笔者将会亲手写一个Hello world的例子.所以如果对struts2使用比较了解的朋友,请跳过本 ...

  6. openjudge7834:分成互质组 解析报告

    7834:分成互质组 总时间限制:  1000ms 内存限制:  65536kB 描述 给定n个正整数,将它们分组,使得每组中任意两个数互质.至少要分成多少个组? 输入 第一行是一个正整数n.1 &l ...

  7. C# 解析html —— 将html转为XHTML，然后利用Xml解析

    呵呵,由于正则不熟,所以另谋出路——利用XML去解析html. 要想将抓取到的数据(直接抓取到的是byte[])  转为XML文档(即XMLDocument对象),有两个要点: 一.判断编码(http ...

  8. WinForm(VB.NET)获取当前登录的用户名

    运行Windows Task Manager,查看Users标签,可以看到所有登录电脑的用户,现在Insus.NET想命名用VB.NET的WinForm程序去获取当前的用户名. 获取程序简单,可以参考 ...

  9. C语言写的流氓关机程序及破解

    记得大二刚开始接触电脑的那个时候,偶尔会弹出一个强制关机的窗口,当时没有办法,如下: 现在看来只是一个小程序而已,用C语言编写的: #include<windows.h> int main ...

  10. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...