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

发布时间:2020-08-06 13:49:34 作者:走出地平线
来源:网络 阅读:971

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");
            }
})


推荐阅读:
  1. 前端基础05 jQuery入门
  2. Flask_学习笔记_05: Flask中的网页模板

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

appcan slider pp 入门学习

上一篇:如何使用python中自带的ide

下一篇:编写和运行Python程序的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》