Onsen-ui Carousel 属性自动播放不起作用

Question

我在这里使用温泉 UI 我在我的移动网络应用程序中使用轮播，但这里发生了一些问题，我无法使用属性自动播放。

   <ons-page>
     <ons-toolbar>
     <div class="left">
     <ons-toolbar-button onclick="prev()">
        <ons-icon icon="md-chevron-left"></ons-icon>
      </ons-toolbar-button>
     </div>
     <div class="center">Carousel</div>
     <div class="right">
      <ons-toolbar-button onclick="next()">
        <ons-icon icon="md-chevron-right"></ons-icon>
      </ons-toolbar-button>
      </div>
      </ons-toolbar>

     <ons-carousel fullscreen auto-scroll id="carousel">
     <ons-carousel-item style="background-color: #085078;">
        <div style="text-align: center; font-size: 30px; margin-top: 
       20px; 
      color: #fff;">
        BLUE
      </div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; 
      color: #fff;">
        DARK
      </div>
       </ons-carousel-item>
       <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; 
         color: #fff;">
        ORANGE
        </div>
        </ons-carousel-item>
       < /ons-carousel>  
       </ons-page>

还有我的 Javascript：

var prev = function() {
       var carousel = document.getElementById('carousel');
       carousel.prev();
};

var next = function() {
       var carousel = document.getElementById('carousel');
       carousel.next();
};

ons.ready(function() {
       var carousel = document.addEventListener('postchange', function(event) {
       console.log('Changed to ' + event.activeIndex)
  });
});

没有出现错误消息，但我的自动播放选项不起作用。

Answer 1

如果您通过说“自动播放”来表示自动auto-scroll选项，那么我想您会误解了auto-scroll选项的目标，并期望轮播会在没有任何用户使用auto-scroll选项的情况下进行操作。

从文档中 ：

自动滚动：如果设置了此属性，则轮播会在释放时自动滚动到最接近的商品边框。

看看它在操场上如何工作。 使用auto-scroll选项，当用户想要滑动到转盘中的下一个或上一个项目时，她不需要滑动到最后。 只需部分滑动就足够了，因为轮播会自动完成滑动。 删除auto-scroll选项，按运行，然后尝试滑动轮播。 您将看到滑动停止在您释放的位置。

因此， auto-scroll不是自动播放。 但是到底如何实现自动播放？ 只需在setInterval函数中使用轮播方法（ next ， first和getActiveIndex ）和属性（ itemCount ）即可。

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);

 var prev = function() { var carousel = document.getElementById('carousel'); carousel.prev(); }; var next = function() { var carousel = document.getElementById('carousel'); carousel.next(); }; ons.ready(function() { var carousel = document.addEventListener('postchange', function(event) { console.log('Changed to ' + event.activeIndex) }); }); setInterval(function(){ var carousel = document.getElementById('carousel'); if (carousel.getActiveIndex() === carousel.itemCount-1) carousel.first(); else carousel.next(); }, 1000); 

 <link href="https://unpkg.com/onsenui/css/onsen-css-components.css" rel="stylesheet"/> <link href="https://unpkg.com/onsenui/css/onsenui.css" rel="stylesheet"/> <script src="https://unpkg.com/onsenui/js/onsenui.js"></script> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="prev()"> <ons-icon icon="md-chevron-left"></ons-icon> </ons-toolbar-button> </div> <div class="center">Carousel</div> <div class="right"> <ons-toolbar-button onclick="next()"> <ons-icon icon="md-chevron-right"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <ons-carousel fullscreen id="carousel"> <ons-carousel-item style="background-color: #085078;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> BLUE </div> </ons-carousel-item> <ons-carousel-item style="background-color: #373B44;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> DARK </div> </ons-carousel-item> <ons-carousel-item style="background-color: #D38312;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> ORANGE </div> </ons-carousel-item> < /ons-carousel> </ons-page> 

Answer 2

这个功能非常适合我......

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);