05 AppCan入门学习之图片轮播及其事件处理

Slider滑块使用

一、添加滑块

二、在js完成事件处理

 

函数

appcan.slider({参数})

selector:   /*选择器*/,

hasIndicator:true or false  /*是否有位置提示条*/,

hasLabel: true or false   /*是否有标签文字栏*/,

aspectRatio:0 or !=0   /*是否控制纵横比，0为使用控件高度，>0使用纵横比*/,

index:0 or >0   /*默认选择项*/

auto:2000   /*轮播时间，单位毫秒*/

 

方法：

set(data)

clickItem事件

 

例1：

1.添加滑块

<!--添加滑块-->

<div id="slider" class="slider"></div>

2.js代码：

var slider = appcan.slider({
        selector : '#slider',
        aspectRatio:6/16,
        hasLabel:true,
        index:0,
        auto:2000
        });
        slider.set([{
        img : "images/slider1.jpg",
        label:""
        }, {
        img : "images/slider2.jpg",
        label:""
        }, {
        img : "images/slider3.jpg",
        label:""
        }])
       slider.on("clickItem",function(index,data){
})

clickItem事件触发

在slider.on("clickItem",function(index,data){})中添加事件处理即可。

如：

slider.on("clickItem",function(index,data){
            if(0 == index){
                appcan.window.open('page', 'page.html', 10);
            }else if(1 == index){
                appcan.window.open('page2', 'page2.html', 10);
            }else if(2 == index){
                appcan.window.open('page3', 'page3.html', 10);
            }else{
                alter("error");
            }
})