<style type="text/css">

#myFocus{ width:560px; height:300px;}

</style>

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

<script type="text/javascript">

//设置

myFocus.set({

id:'myFocus',//ID

pattern:'mF_classicHB',//风格

time:6

});

</script>

插入
<div id="myFocus"><!--焦点图盒子-->
<div class="loading"></div><!--载入画面(可删除)-->
<div class="pic"><!--图片列表-->
<ul>
<li><a href="#1"><img src="/img/1a.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></a></li>
<li><a href="#2"><img src="/img/2a.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></a></li>
<li><a href="#3"><img src="/img/3a.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></a></li>
<li><a href="#4"><img src="/img/4a.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></a></li>
<li><a href="#5"><img src="/img/5a.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></a></li>
</ul>
</div>
</div>


本文来自oleou

使用者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'(匀速运动)