Question

我使用sencha touch 2 + java script + html 5创建简单的应用程序，自动更改/滑动html页面。我在下面编写代码来使用DelayedTask任务来滑动html页面，但代码无效。

Main.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'
    }
]

}）;

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

Answer 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事件被paint事件取代。在这种情况下，您还可以使用show事件。
设置每个开关后的延迟时间，您需要收听activeitemchange事件

希望它有所帮助。

Answer 2

我知道已有一个已接受的答案，但这是我对此的实现（对于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 demo here的松散基础。

Answer 3

chrome 43 bug之后。自动轮播无法在我的应用中运行。所以我做了一些定制

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

        }
    },

无法使用sencha自动滑动html页面

3 个答案: