cycler - 循环播放控件

根据传入的图片地址列表,图片容器,图片翻页容器,有播页时的回调事件,通过改变图片的透明度来使图片有淡入淡出的动画效果,这里的动画是用CSS3实现的,在低版本浏览器中不能应用这个动画

如:

 循环播放控件

Allocate

cycler控件所在脚本 {lib}util/cycler/cycler.js

<html>
    <body>
        <div class="imgcase">
            <div id="box"></div>
            <div class="pgr"><span>1</span><span>2</span><span>3</span><span>4</span></div>
        </div>
    </body>
</html>

添加图片轮换控件依赖文件如下

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u'),
        _p = _('nej.ut');
     var _box =  _e._$get('box');
     var _pager = _e._$get('pgr');
     var _list =['../image/cyclerdemo.png',
                 '../image/cyclerdemo1.png',
                 '../image/cyclerdemo2.png',
                 '../image/cyclerdemo3.png']

     var _cycler = _p._$$Cycler._$allocate({list:_list,nbox:_box,pbox:_pager,event:'click',onchange:onChange})

     function onChange(_index){
         console.log(_index);
     }
}
define(['{lib}util/cycler/cycler.js'],f);

Explain

参数

list [Array] - 图片地址列表

nbox [String|Node] - 图片容器节点

pbox [String|Node] - 页码索引容器节点,默认的页码选中是js-select

event [String] - 页码切换事件名称,默认为click

interval [Number] - 轮播时间间隔,单位秒,默认为2s

onchange [Function] - 页码切换触发事件,输入index

更多的参数信息请参照cycler.js api说明

Recycle

cycler.$recycle();

cycler external interface

cycler.$setImage(_url) 设置list外的图片

Known Issues

Demo

轮播控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus