sencha touch Carousel 自动切换

/**
* 跑马灯自动切换
*/
Ext.define('ux.RotatingCarousel', {
    extend: 'Ext.carousel.Carousel',
    alternateClassName: 'rotatingCarousel',
    xtype: 'rotatingCarousel',
    config: {
        delay: 3000,
        start: true,
        listeners: {
            tap: {
                fn: function () {
                    this.pause();
                },
                element: 'element'
            },
            swipe: {
                fn: function () {
                    this.start();
                },
                element: 'innerElement'
            }
        }
    },
    initialize: function () {
        if (this.config.start) {
            this.start();
        }
    },
    rotate: function () {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        if (this.getActiveIndex() === this.getMaxItemIndex()) {
            this.setActiveItem(0, 'slide');
        } else {
            this.next();
        }
        this.timeout = Ext.defer(this.rotate, this.config.delay, this);
    },
    start: function (delayStart) {
        this.timeout = Ext.defer(this.rotate, delayStart || this.config.delay, this);
    },
    pause: function (delayStart) {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        if (delayStart) {
            this.start(delayStart);
        }
        return this;
    },
    stop: function (delayStart) {
        this.pause(delayStart);
        this.setActiveItem(0, 'slide');
        return this;
    }

});















Ext.define('app.view.Home', {
    extend: 'Ext.Container',
    xtype: 'home',
    requires: ['ux.RotatingCarousel'],
    config: {
        items: [{
            xtype: 'rotatingCarousel',
            height: '200px',
            items: [{
                html: '<div class="homeImg" style="background-image:url(\'resources/images/lg1.png\')"></div>'
            },
            {
                html: '<div class="homeImg" style="background-image:url(\'resources/images/lg2.png\')"></div>'
            },
            {
                html: '<div class="homeImg" style="background-image:url(\'resources/images/lg3.png\')"></div>'
            }]
        }]
    }
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值