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; } });
使用:
1 Ext.define('app.view.Home', { 2 extend: 'Ext.Container', 3 xtype: 'home', 4 requires: ['ux.RotatingCarousel'], 5 config: { 6 items: [{ 7 xtype: 'rotatingCarousel', 8 height: '200px', 9 items: [{ 10 html: '<div class="homeImg" style="background-image:url(\'resources/images/lg1.png\')"></div>' 11 }, 12 { 13 html: '<div class="homeImg" style="background-image:url(\'resources/images/lg2.png\')"></div>' 14 }, 15 { 16 html: '<div class="homeImg" style="background-image:url(\'resources/images/lg3.png\')"></div>' 17 }] 18 }] 19 } 20 });

浙公网安备 33010602011771号