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>'
            }]
        }]
    }
});




你可能感兴趣的:(sencha touch Carousel 自动切换)