一.首先点击这里下载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. javascript类型系统——数组array

    × 目录 [1]创建 [2]本质 [3]稀疏[4]长度[5]遍历[6]类数组 前面的话 除了对象之外,数组Array类型可能是javascript中最常用的类型了.而且,javascript中的数组与 ...

  2. Mina、Netty、Twisted一起学（十）：线程模型

    要想开发一个高性能的TCP服务器,熟悉所使用框架的线程模型非常重要.MINA.Netty.Twisted本身都是高性能的网络框架,如果再搭配上高效率的代码,才能实现一个高大上的服务器.但是如果不了解它 ...

  3. Nodejs学习笔记（四）——支持Mongodb

    前言:回顾前面零零碎碎写的三篇挂着Nodejs学习笔记的文章,着实有点名不副实,当然,这篇可能还是要继续走着离主线越走越远的路子,从简短的介绍什么是Nodejs,到如何寻找一个可以调试的Nodejs ...

  4. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  5. js页面跳转整理

    js页面跳转整理 js方式的页面跳转1.window.location.href方式    <script language="javascript" type=" ...

  6. Windows Azure HandBook (1) IaaS相关技术

    <Windows Azure Platform 系列文章目录> 1.Microsoft Azure底层是否由System Center和Hyper-V构成? Microsoft Azure ...

  7. 基于HT for Web的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...

  8. 3种Java从文件路径中获取文件名的方法

    package test; import java.io.File; public class FileName { /** * @param args */ public static void m ...

  9. HashSet 与TreeSet和LinkedHashSet的区别

    Set接口      Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false.      Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就 ...

  10. winform控件

    公共控件:1.Button: Enabled - 开始不可用 Visible -不可视(用来设置权限,取用户看不见的值)2.CheckBox .CheckListBox -复选框,复选框组 3.Com ...