無法使用sencha自動滑動html頁面

我使用sencha touch 2 + java腳本+ html 5創建簡單的應用程序，它自動更改/滑動html頁面。我寫下面的代碼來使用DelayedTask任務滑動html頁面，但代碼無法正常工作。無法使用sencha自動滑動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' 
    } 
]

}）;

我寫這篇文章的代碼來自動的一面，但它不工作，請幫助我..

來源

2012-04-12 Prashant Kadam

有在你的代碼相當多的錯誤。請試試這個，因爲我測試過，它的工作原理（變化只對聽衆製造）：

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事件煎茶更換觸摸2在這種情況下，您也可以使用show事件。
每個cardswitch後設定的延遲時間，你需要聽activeitemchange事件

希望它能幫助。

來源

2012-04-12 11:23:24

我知道，已經是一個公認的答案，但這裏是我實施這個（爲煎茶觸摸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; 
     } 
    }

，這是基於鬆散掉煎茶觸摸demo here。

來源

2013-06-20 00:44:24 Jarrod

鉻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-24 02:37:33

無法使用sencha自動滑動html頁面

回答

相關問題