easy

DocsVersion : 0.1.0

Switchable 轮播组件

Define in : switchable.js

该组件用于将一组图片进行幻灯片式的循环播放,当然,不仅仅是图片,也可以是任何你想要展示的内容,通常是用于图片。

Switchable( target, [ options ] )

依赖
JS : 不依赖
CSS : 依赖样式
HTML : 固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅对第一个匹配元素进行轮播实例的绑定。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
auto Boolean true

是否自动切换。

duration Number 600

切换动画的运行时间,仅在 effects 参数不为 null 时才有效。

easing String swing

切换动画的缓动函数名称,仅在 effects 参数不为 null 时才有效。

effects String fade

动画效果的名称。

fade 淡入淡出。

slideX 横向滑动。

slideY 纵向滑动。

imglazyload Boolean false

是否设置图片进行延迟加载。

interval Number 3000

自动切换时的动画间隔,单位为毫秒。

index Boolean true

是否显示索引切换按钮,组件会根据切换的屏数自动生成等量的切换按钮。

init Function null

初始化的回调函数,该函数的 this 指向绑定了轮播实例的元素。

nav Boolean true

是否显示上一组、下一组的切换按钮,组件会自动生成该按钮,如果要自行添加该按钮,请将该参数设置成 false。

方法
  • destroy

    销毁轮播实例。

  • on

    对轮播实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载轮播实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

  • change

    对轮播实例进行主动切换,该方法接受一个索引值作为参数,该参数则是要切换至的面板。

  • pause

    该方法用来暂停自动播放的轮播实例。

  • play

    该方法用来继续暂停了的轮播实例。

下表列出了支持的事件类型。

事件类型 说明 事件对象
change

切换完成后触发的事件。

event.index 当前轮播索引。

event.target 当前轮播面板元素。

init

change 是每次切换都回触发,init 是第一次切换才触发。init 事件是一个一次性事件。

event.index 当前轮播面板元素的索引。

event.target 当前轮播面板元素。

在使用 Switchable 组件前,对其进行加载。

E.use( 'switchable', function(){
    // 在回调中实例化轮播组件
});

Switchable 组件需要固定的 HTML 结构。

<div class="eui_switchable">
    <div class="sc_container">
        <ul>
            <li>面板一</li>
            <li>面板二</li>
            <li>面板三</li>
            <li>面板四</li>
        </ul>
    </div>
    <!-- 
        如果要自定义上一组、下一组的切换按钮
        可以先将按钮的结构写好,否则组件会自动生成
        该按钮的结构
    <a href="#" class="sc_prev">Previous</a>
    <a href="#" class="sc_next">Next</a>
    -->    
</div>

Switchable 组件需要依赖样式。

.eui_switchable{ width:500px; height:313px; position:relative; margin-left:20px; }
.eui_switchable .sc_container{ width:500px; height:313px; position:relative; overflow:hidden; }
.eui_switchable .sc_container ul{ width:500px; height:313px; }
.eui_switchable li{ width:500px; height:313px; overflow:hidden; }
.eui_switchable .sc_index{ position:absolute; right:12px; bottom:12px; z-index:3; }
.eui_switchable .sc_index a{ float:left; width:30px; height:7px; line-height:7px; margin-left:2px; background:#fff; opacity:0.7; filter:alpha(opacity=70); cursor:pointer; text-indent:-999em; overflow:hidden; }
.eui_switchable .sc_index .current{ background-color:#3498f0; opacity:1; filter:alpha(opacity=100); }
.eui_switchable .sc_prev,
.eui_switchable .sc_next{ position:absolute; top:50%; margin-top:-29px; display:block; width:40px; height:58px; background:url(../images/arrow.png) no-repeat 0 0; text-indent:-999em; overflow:hidden; opacity:0.5; filter:alpha(opacity=50); border:2px solid #555; }
.eui_switchable .sc_prev{ left:10px; }
.eui_switchable .sc_next{ right:10px; background-position:-46px 0; }
.eui_switchable .sc_prev:hover,
.eui_switchable .sc_next:hover{ opacity:0.8; filter:alpha(opacity=80); }
例子1

创建一个普通的图片轮播组件。

new E.ui.Switchable( '#switchable1' );
例子2

创建图片横向滑动的轮播组件,并自定义切换按钮,如果该按钮是组件生成的,在默认状态下是隐藏的,仅在鼠标 hover 时才会显示。并设置两个按钮用来控制暂停和继续。

暂停继续

var sc = new E.ui.Switchable( '#switchable2', {
    effects : 'slideX',
    nav : false, 
    interval : 5000
});

E( '#runDemo1' ).on( 'click', function(){
    sc.pause();
});

E( '#runDemo2' ).on( 'click', function(){
    sc.play();
});
例子3

创建图片纵向滑动的轮播组件,并设置图片延迟加载,从第三组开始设置,组件在页面初始化时会默认加载前两组,当切换到第二组时会预加载第三组的图片,依次类推。

延迟加载的图片将真实的地址通过 data-lazysrc 存放在 img 标签上。

<img src="placeholder.png" data-lazysrc="001.jpg" alt="" />

src 是用来存放占位图片的地址,占位图片必须要有,不能为空。data-lazysrc 就是存放真实的图片地址。

new E.ui.Switchable( '#switchable3', {
    effects : 'slideY',
    imglazyload : true, // 开启图片延迟加载
    interval : 4000
});