使用者API

myFocus有两种调用方式,一种是常规调用:

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

一种是作为jQuery插件的方式调用(前提是必须已加载jQuery库):

  • $(expr).myFocus(settings[, callback]); //这段代码必须在焦点图的HTML结构之后调用,或是在ready函数中调用

参数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:100

    trigger为'mouseover'模式下的切换延迟(单位毫秒)

  • loadIMGTimeout
    Number Default:3

    载入myFocus图片的最长等待时间(Loading画面时间)(单位秒,0表示不等待直接播放)

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

另外,每款风格也可以定义它们自己的扩展属性设置,或是默认设置(可以在它的js文件中找到),例如在‘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'(匀速运动)

您可以在set函数调用的时候重新设置这些参数,以覆盖默认值。