Question

我仅尝试使用以下代码在用户看到轮播时开始自动播放（其他最新帖子在用户滚动到轮播元素时将不可见）：

var App = (function(window){

  "use strict";

  var _this = null;

  var cacheCollection = {};

  return{

    init : function(){

      _this = this;

      this.autoplayonsection();
    },

    autoplayonsection: function(){
      var fbowl = $('#r-latest-news-slider');

      $('#r-latest-news').on('mouseenter', function() {
        console.log('autoplay');
        fbowl.trigger('play.owl.autoplay', [1000]);
      });
      $('#r-latest-news').on('mouseleave', function() {
        console.log('stop autoplay');
        fbowl.trigger('stop.owl.autoplay');
      });
    },


    LatestNewsCarousel: function(){
      if($("#r-latest-news-slider").length > 0){
        var owl = $('#r-latest-news-slider').owlCarousel({
            loop:true,
            margin: 30,
            items: 4,
            nav: false,
            dots: true,
            autoplay:false,
            autoplayTimeout:1000,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:2
                },
                1000:{
                    items:4
                }
            }
        })
      }
    },
  }

})(window);

$(document).ready(function($) {
  $('#preloader').fadeOut('slow',function(){$(this).remove();});
  App.init();
});

控制台日志可以正常工作，当我将鼠标移到元素上或将其保留时，我会看到文本。但是由于某种原因，自动播放只能运行一次，它会滑动一次，然后停止播放，直到我用鼠标离开时再次输入该元素。

这是包含我的轮播的元素：

<div class="owl-carousel r-latest-news-list" id="r-latest-news-slider">

为什么只播放一次？我该怎么解决？

Answer 1

我发现autoplayTimeout的最小值为1233 ...低于1233无效...

以下是工作选项的示例：

{
    items:1,
    loop:true,
    smartSpeed:1200,
    autoplay:true,
    autoplayTimeout:1500, //if you set this value to 1000, it will NOT working
    autoplayHoverPause:true,
}

在mouseenter上使用自动播放触发器时，猫头鹰轮播自动播放仅播放一次

1 个答案: