0

我正在使用 sencha touch 2 + java script + html 5 创建简单的应用程序，它会自动更改/滑动 html 页面。我写了下面的代码来使用 DelayedTask 任务滑动 html 页面，但代码不起作用。

主.js

Ext.create('Ext.Carousel', {
fullscreen: true,
xtype:'carousel',
cls:'carousel',

defaults: {

    styleHtmlContent: true
},

config: {
    ui : 'light',

},

 listeners:
            {
                'afterrender': function(carousel) {
                    carousel.pageTurner = new Ext.util.DelayedTask(function() {
                        if (this.getActiveIndex() == this.items.length - 1) {
                            this.setActiveItem(0, 'slide');
                        }
                        else {
                            this.next();
                        }
                        this.pageTurner.delay(6000);
                    }, carousel);
                    carousel.pageTurner.delay(6000);
                }
            },

items: [

    {
        html : '<img src="resources/images/Picture1.png" width="100%" height = "100%" align="middle" /> <audio autoplay loop><source src="resources/audio/kalimba.mp3"></audio>',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    },
    {
        html : '<img src="resources/images/Picture2.png" width="100%" height = "100%" margin=0 align="middle" /> ',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    },
    {
        html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    },
    {
        html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
        style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
    }
]

});

我将此代码写到自动端，但它不起作用请帮助我..

4

3 回答 3

1

您的代码中有很多错误。请试试这个，正如我测试过的那样，它可以工作（仅对听众进行更改）：

  listeners:
        {
            'show': function(carousel) {
                carousel.pageTurner = new Ext.util.DelayedTask(function() {
                    if (carousel.getActiveIndex() == carousel.items.length - 2) {
                        carousel.setActiveItem(0, 'slide');
                    }
                    else {
                        carousel.next();
                    }
                }, carousel);
                carousel.pageTurner.delay(1000);
            },

                'activeitemchange': function(carousel){
                    if (carousel.getActiveIndex() == 0) {
                       carousel.fireEvent('show',this);

                    } else

                    carousel.pageTurner.delay(1000);
                },

        },

一些解释：

  • afterrender在 Sencha Touch 2 中将event 替换为paintevent。在这种情况下，您也可以使用showevent。
  • 每次换卡后设置延迟时间，需要监听activeitemchange事件

希望能帮助到你。

于 2012-04-12T11:23:24.270 回答
0

我知道已经有一个公认的答案，但这是我的实现（对于 sencha touch v2.2）

点击或手动滑动图像将暂停幻灯片。再次敲击将恢复。

确保将其应用于xtype: 'carousel'

    {
        xtype: 'carousel',

        //...your config stuff here...

        carouselSlideDelay: 3500,
        autoSlide: true,
        listeners: {
            initialize: function(carousel) {

                if (this.autoSlide) {
                    carousel.isRunning = false;
                    this.start(carousel);

                    // Add tap event.
                    carousel.element.on('tap', function(e, el){
                        if (!carousel.isRunning) {
                            carousel.next();
                            this.start(carousel);
                        } else {
                            this.stop(carousel);
                        }
                    }, this);

                    // Add drag event.
                    carousel.element.on('dragstart', function(e, el){
                        this.stop(carousel);
                    }, this);
                }
            }
        },
        start: function(carousel, delay) {
            // If already running.
            if (carousel.isRunning) { return; }

            // Allow for overriding the default delay value.
            var delay = (delay !== undefined ? delay : this.carouselSlideDelay);

            carousel.isRunning = true;
            carousel.timerId = setInterval(function () {
                carousel.next();
                if (carousel.getActiveIndex() === carousel.getMaxItemIndex()) {
                    carousel.setActiveItem(0);
                }
            }, delay);
        },
        stop: function(carousel) {
            clearInterval(carousel.timerId);
            carousel.isRunning = false;
        }
    }

这大致基于此处的 Sencha Touch演示。

于 2013-06-20T00:44:24.847 回答
0

在 chrome 43 错误之后。自动轮播在我的应用程序中不起作用。所以我做了一些定制

 direction: 'horizontal',
 delay: 10000,
 start: true,
 indicator:false,

listeners:
    {
       activate: function(homeScreenCarousel) {
        var me=this;

           homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
                if (me.getActiveIndex() == me.items.length-1) {
                    me.setActiveItem(0,'slide');
                }
                else {
                   me.setActiveItem(me.getActiveIndex()+1,'slide');
                }
                me.pageTurner.delay(8000);
            }, homeScreenCarousel);
            homeScreenCarousel.pageTurner.delay(8000);
        },

        activeitemchange:function(homeScreenCarousel){
          var me=this;
          homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
                if (me.getActiveIndex() == me.items.length - 1) {
                    me.setActiveItem(0, 'slide');
                }
                else {

                      me.setActiveItem(me.getActiveIndex()+1,'slide');
                }
                 homeScreenCarousel.pageTurner.delay(8000);
            }, homeScreenCarousel);

        }
    },
于 2015-06-24T02:37:33.747 回答