学myFocus焦点图JS插件，一篇文章就够了

什么是myFocus

官网： http://demo.jb51.net/js/myfocus/demo.html

下载地址： http://pan.baidu.com/s/1pJ5j0wz 密码: 7s7e

myFocus是一个专注于WEB端焦点图/轮换图的JS库

myFocus从v2.0.4开始转移到github，后续版本（如果有）也会在这里更新。

myFocus 特点

原生JS编写，独立无依赖

性能卓越，同样效果比jQuery更流畅

简单易用，傻瓜式API和标准HTML结构，每个焦点图的接口/结构都是通用的

效果华丽，媲美Flash焦点图

功能强大，30多种风格切换，支持N种常用设置

体积小巧，myFocus主库文件(v2.0.min)为9.89KB，，而一款风格文件(js+css)大概为3KB左右，这些加起来的体积或许也不够您页面上的一张正常大小的图片，您完全可以放心使用。

支持 IE6+ / Chrome5.0+ / Firefox3.5+ 等现代浏览器

支持自定义开发扩展

Step 1. 在html页面 底部 引入相关文件

<!-- 引入myFocus库 -->

<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>

<!-- 引入风格js文件 -->

<script type="text/javascript" src="js/mf-pattern/slide3D.js"></script>

<!-- 引入风格css文件 -->

<link href="js/mf-pattern/slide3D.css" type="text/css" />

提示：符合条件的情况下，引入风格文件(js/css)可省，引入myFocus库即可。事实上，风格文件是不需要在使用时手动引入，myFocus会根据你的pattern设置，寻找myFocus库文件目录下的mf-pattern目录，当找到相应的风格文件后，自动引入。

Step 2. 创建myFocus标准的 html结构 ，并填充你的内容

<!-- 焦点图盒子 -->

<div id=" boxID ">

<!-- 载入中的Loading图片(可选) -->

<div class=" loading "><img src="img/loading.gif" alt="拼命加载中..." /></div>

<!-- 内容列表 -->

<div class=" pic ">

<ul>

<li><a href="#"><img src="img/1.jpg" alt="标题" text="详细描述" /></a></li>

<li><a href="#"><img src="img/2.jpg" alt="标题" text="详细描述" /></a></li>

<li><a href="#"><img src="img/3.jpg" alt="标题" text="详细描述" /></a></li>

<li><a href="#"><img src="img/4.jpg" alt="标题" text="详细描述" /></a></li>

<li><a href="#"><img src="img/5.jpg" alt="标题" text="详细描述" /></a></li>

<!-- 你可以根据需要添加更多的列 -->

</ul>

</div>

</div>

Step 3. 在step1代码之后的任意一个位置 调用 (建议在head标签结束前调用)

// 你可以简单的调用，只设置它的盒子id，其它参数全部默认设置：

<script type="text/javascript">

myFocus.set({

id:'boxID'

});

</script>

// 或详细一点的参数调用：

<script type="text/javascript">

myFocus.set({

id:'boxID', //焦点图盒子ID

pattern:'mF_fancy', //风格应用的名称

time:3, //切换时间间隔(秒)

trigger:'click', //触发切换模式:'click'(点击)/'mouseover'(悬停)

width:450, //设置图片区域宽度(像素)

height:296, //设置图片区域高度(像素)

txtHeight:'default' //文字层高度设置(像素),'default'为默认高度，0为隐藏

});

</script>

//更多参数设置及jQuery方式调用请查看 使用者API 。

使用者API：

myFocus有两种调用方式：

常规调用： myFocus.set(settings[, callback]);  //这段代码可以在引入myFocus库后的任意地方调用

作为jQuery插件调用(前提是必须已加载jQuery库)： $(expr).myFocus(settings[, callback]);  //这段代码必须在焦点图的HTML结构之后调用，或是在ready函数中调用

参数callback为可选回调函数，当焦点图全部准备就绪后(开始播放前)调用，在这里可设置自定义事件等。

参数settings为 JSON格式 数据，包含以下基本属性设置：

• id String Default:null焦点图盒子ID，无默认值，必填项(在常规调用时)
• pattern String Default:'mF_fancy'风格应用名称
• time Number Default:4切换时间间隔(单位秒)
• width Number Default:null图片区域宽度(单位像素)，无默认值，留空则从CSS样式获取大小
• height Number Default:null图片区域高度(单位像素)，无默认值，留空则从CSS样式获取大小
• txtHeight Number/String Default:'default'文字层高度(单位像素),0表示隐藏文字层,省略设置或'default'即为默认高度
• trigger String Default:'click'触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)]
• wrap Boolean Default:true是否保留边框(有的话)[true|false]
• auto Boolean Default:true是否自动播放(切换)[true|false]
• index Number Default:0开始显示的图片序号(从0算起)
• delay Number Default:100trigger为'mouseover'模式下的切换延迟(单位毫秒)
• loadIMGTimeout Number Default:3载入myFocus图片的最长等待时间(Loading画面时间)(单位秒,0表示不等待直接播放)

另外，每款风格也可以定义它们自己的扩展属性设置，例如在‘mF_taobao2010’这款风格中，扩展设置有：

• seamless Boolean Default:true是否无缝，可选：true(是)/false(否)
• duration Number Default:600过渡时间(毫秒)，时间越大速度越小
• direction String Default:'left'运动方向，可选：'top'(向上) | 'left'(向左)
• easing String Default:'easeOut'运动形式，可选：'easeOut'(快出慢入) | 'easeIn'(慢出快入) | 'easeInOut'(慢出慢入) | 'swing'(摇摆运动) | 'linear'(匀速运动)