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 : "p_w_picpaths/slider1.jpg",
        label:""
        }, {
        img : "p_w_picpaths/slider2.jpg",
        label:""
        }, {
        img : "p_w_picpaths/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");
            }
})