TGP-Slider(TGP轮播图组件)

• 适用于在TGP内使用的轮播图组件，定制化。 将TGP项目中所有用到的轮播效果抽象化成组件，同时将各种产品形态的样式， 支持三种effect:(translation)单张图从左向右平移、(slider-3d)三张卡片切换、(fade)淡入淡出。 如果items配置为二维数组，那么就表示单帧多图模式。
• 作者 : [email protected]
• 创建日期 : 2016/3/16

Install

//内网:
tnpm install @tencent/tgp-slider

Usage

//生成一个轮播图实例对象。
new StaticSlider(wrapper, options);

Examples

    let StaticSlider = require('StaticSlider'),
        wrapper = document.getElementById('wrapper1'),
        ss = new StaticSlider(wrapper, {
            contentStyle : {
            //...
            }
        });

Parameters

wrapper

Type: HTMLElement

指定的容器

options

Type: Object

contentStyle

Type : Object

主体UI风格

effect

Type : String

特效名，取值范围为：slider-3d | fade | translation

• slider-3d : 三张（或者5张卡片的轮换效果）
• fade : 淡入淡出效果（单图切换）
• translation : 平移（单图切换）

background

Type : String

背景图的样式，取值范围：cover | contain，背景图比例均与原始尺寸一致。

• cover : 填满，不定宽容器在拉伸时图片可能显示不全，但是不会有透明边缘。
• contain : 完全包含，不定宽容器在拉伸时可能会有透明边缘，但是图片会完全显示。

cardWidth

Type : Number

单张图容器<li>的宽度

showPrevAndNext

Type : Boolean

是否展示前后导航的按钮，默认true.

navStyle

Type : Object

导航部分的样式

type

Type : String

导航栏的样式， 可选值有 ： disc | thumb | title | title-in-item | none

• disc 小圆点
• thumb 缩略图模式。这要求items的配置部分必须有thumb字段，否则就以image(图片)指或者poster(视频)
• title 标题模式。取自items里面的title字段。
• title-in-item 另一种标题模式，但是显式模式是在每一帧图片（视频）的下面，跟随帧动画一起移动。
• none 无导航栏。

showPrevAndNext

Type : Boolean

是否显示导航栏的前后按钮，默认false.

pauseWhenHoverItem

Type : Boolean

鼠标hover到item上是否暂停自动播放， 默认true.

slideWhenHoverItem

Type : Boolean

鼠标hover到导航选项时，是否slide到对应item， 默认false.

autoRun

Type : Boolean

是否自动播放，默认true.

startAt

Type : Number

初始化展示第几个item，默认0(第一个).

duration

Type : Number

轮播过程持续时间，单位ms，默认500.

delay

Type : Number

轮播间隔时间，单位ms，默认3000.

easing

Type : String

翻页切换的timing-function，默认'ease-in',建议不赋值。同css transition-timing-function.，支持自定义cubic-bezier.，默认ease-out.

ownClass

Type : String

自定义的className，附加在.tgp-slider的容器上，可以实现自定义UI。

forceTriggerAction

Type : Boolean

如果置为true，点击任意一个item上时，都发生对应的onClick/onItemClick， 而不是发生slide行为；否则只发生slide行为。默认false.

beforeSlide(item, index, li)

Type : Function

发生滑动之前的回调.

• item : 事件发生的item元素
• index : 事件发生元素的索引号
• li : {HTMLElement} 事件发生的<li>元素

onSliding(item, index, li)

Type : Function

滑动过程中(动画执行过程)

• item : 事件发生的item元素
• index : 事件发生元素的索引号
• li : {HTMLElement} 事件发生的<li>元素

afterSlide(item, index, li)

Type : Function

一个item划过来后，响应的回调

• item : 事件发生的item元素
• index : 事件发生元素的索引号
• li : {HTMLElement} 事件发生的<li>元素

onItemClick(e,item, index, li)

Type : Function

每个item的公共点击行为，如数据上报等。this为的element

• e : click原始事件对象
• item : 事件发生的item元素
• index : 事件发生元素的索引号
• li : {HTMLElement} 事件发生的<li>元素

onNavItemClick(e,item, index)

Type : Function

导航栏元素（UI取决于navStyle.type值）的click事件

• e : click原始事件对象
• item : 事件发生的item元素
• index : 事件发生元素的索引号

onNavButtonClick(e,item, index)

Type : Function

导航左右箭头的自定义事件,默认为调到下一项。

• e : click原始事件对象
• direct : 点击按钮的方向 -1(左箭头)， 1(右箭头)

items

Type : Array

轮播项元素，结构：[{title : "", image : "", video : "", thumb : ""}]

title

Type : String

轮播项的标题

image

Type : String

轮播图片的URL，如果该项是视频（同级设置了有效的video值），那么image的值将作为该视频的播放前的cover图，即&ltvideo;%gt;的poster属性。

video

Type : String

轮播项为视频的URL。设置了此项则表示是视频，没有则是图片(至少需要有一项)。

thumb

Type : String

缩略图。在navStyle.type = "thumb"时用到此值，如果没有，则取同级的image值

API

id

Type : String

当前轮播图的标记id。一般不需要，仅在内部用。

wrapper

Type : HTMLElement

轮播图的容器，和第一个参数一致。

elements

Type : Object

内部相关dom元素的集合

• viewport 主区域items
• prevBtn 主区域左右箭头按钮
• nextBtn
• navigator 导航区
• navPrevBtn 导航左右箭头
• navNextBtn
• navItems

mutliple

Type : Boolean readonly

是否多图模式。从items的值获得。

status

Type : String readonly

取得轮播图当前的状态

• playing正在播放中
• stopped 已停止

itemsSize

Type : Number readonly

轮播图元素个数

currentIndex

Type : Number readonly

当前viewport所显示元素的索引号

currentLiElement

Type : HTMLElement readonly

当前viewport内的<li>dom节点

slideTo(index)

• index Number

slide到指定的的帧，如果index超过items.length,则取模。

slideToPrev()

向前一帧

slideToNext()

向后一帧

stop(reset)

• reset 位置是否归零（暂不支持设置， 相当于定值false）.

停止轮播

run()

轮播图从当前停止的位置开始继续轮播

License

MIT.

修改记录

2016/05/20

• 去jQuery
• 增加支持CommonJS规范（原来只支持AMD/CMD）
• options.showPrevAndNext 改为options.contStyles.showPrevAndNext
• 支持navigator items上的单击事件。可以通过return false来阻止点击缩略图跳转到对应帧。
• 支持视频选项。

2016/06/18

• 支持淡入淡出、平移、同帧多图效果
• 支持视频自动播放（仅mp4）,后续支持更多。
• 配置参数调整优化。

2016/12/30

• 支持标题跟随图片移动
• 部分代码优化