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

Question

i am create simple app using sencha touch 2 + java script + html 5 which change / slide html pages automatically. i write below code to slide html pages using DelayedTask task but the code is not working .

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

});

i write this code to auto side but its not working please help me..

Answer 1

There are quite many errors in your code. Please try this, as I've tested, it works (changes are only made to listeners ):

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

        },

Some explanation:

• afterrender event is replaced by paint event in Sencha Touch 2. In this situation, you can also use show event.
• to set delay time after each cardswitch, you need to listen to activeitemchange event

Hope it helps.

Answer 2

I know there already an accepted answer, but here is my implementation of this (for sencha touch v2.2)

Tapping or manually sliding the image will pause the slideshow. Tapping again will resume.

Make sure you apply this to 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;
        }
    }

And this was loosely based off the Sencha Touch demo here .

Answer 3

After chrome 43 bug. Auto carousel is not working in my app. so i did some customization

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

        }
    },