ExtJS开发，实现轮播图

来源：互联网发布：mac os x10.8下载地址编辑：程序博客网时间：2024/06/06 12:54

//这是自定义的控件

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

});

简单使用：样式可以自己调。

效果图：

xtype: 'rotatingCarousel',
height: '200px',
items:[
{
xtype:'image',
src:'http://www.flashyl.com/upFiles/tpsc/pngsc/155.xdnzfs/03.png'
},
{
xtype:'image',
src: 'http://www.flashyl.com/upFiles/tpsc/pngsc/155.xdnzfs/11.png'
},
{
xtype:'image',
src: 'http://www.flashyl.com/upFiles/tpsc/pngsc/155.xdnzfs/12.png'
}
]

1 0