您的位置:首页 > 其它

sencha touch Carousel 自动切换

2014-05-13 10:54 232 查看
/**
* 跑马灯自动切换
*/
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>'}]}]}});

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: