猫头鹰旋转木马自动播放不正常？

Question

我遇到了猫头鹰传送带“自动播放”功能的问题。我已经上传并包含了所有需要的文件。它在负载上正常工作。自动播放功能完美。但是当我在任何一张幻灯片上停留时（&我想停止悬停）。当我释放鼠标时，它不再播放。加上当我在浏览器的不同选项卡之间切换并返回旋转木马打开的选项卡时，它也会永久停止。我需要用鼠标点击或鼠标球将其拖动，然后再次播放。

无法弄清楚什么是问题。我咨询了官方的“猫头鹰传送带”网站以及这些线索以及Thread 01,Thread 02,Thread 04。尝试并应用了这些线程提供的所有解决方案。没有改变。

这是我的代码。

<section id="demos"> 
    <div class="row"> 
    <div class="large-12 columns"> 
     <div class="owl-carousel owl-theme"> 
     <div class="item">    
      <img src="carousel-03.png" alt="Owl Image"> 
      <h2>Logo Design</h2> 
      <p>Our logo designs are unique enough to get you the trademark and compelling enough to help you get clients. Get a logo done by us and see for yourself.</p> 
     </div> 
     <div class="item">    
      <img src="carousel-05.png" alt="Owl Image"> 
      <h2>Stationery Design</h2> 
      <p>We design business cards and stationery which Convey the professionalism and seriousness of your business to your customers.</p> 
     </div> 
     <div class="item"> 
      <img src="carousel-02.png" alt="Owl Image"> 
      <h2>Flyers &amp; Brochures</h2> 
      <p>We design brochures which depict your services in an impressive way to both current and potential clientele.</p> 
     </div> 
     <div class="item"> 
      <img src="carousel-01.png" alt="Owl Image"> 
      <h2>Apps Design</h2> 
      <p>We design Apps which depict your services in an impressive way to both current and potential clientele.</p> 
     </div> 
     <div class="item">    
      <img src="carousel-04.png" alt="Owl Image"> 
      <h2>Labels and Packaging</h2> 
      <p>We design Labels and Packaging which depict your services in an impressive way to both current and potential clientele.</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

这是我的js

<script> 
    $(document).ready(function() { 
     var owl = $('.owl-carousel'); 
     owl.owlCarousel({ 
     loop: true, 
     nav: false, 
     navSpeed: 2000, 
     slideSpeed : 2000, 
     dots: false, 
     dotsSpeed: 2000, 
     lazyLoad: false, 
     autoplay: true, 
     autoplayHoverPause: true, 
     autoplayTimeout: 5000, 
     autoplaySpeed: 800, 
     margin: 0, 
     stagePadding: 0, 
     freeDrag: false, 
     mouseDrag: true, 
     touchDrag: true, 
     slideBy: 1, 
     fallbackEasing: "linear", 
     responsiveClass: true, 
     navText: [ "previous", "next" ], 
     responsive: { 
      0: { 
       items: 1, 
       nav: false 
      }, 
      600: { 
       items: 2, 
       nav: false 
      }, 
      1000: { 
       items: 3, 
       nav: false, 
       margin: 20 
      } 
      } 
     }); 
     owl.on('mousewheel', '.owl-stage', function (e) { 
     if (e.deltaY>0) { 
      owl.trigger('next.owl'); 
     } else { 
      owl.trigger('prev.owl'); 
     } 
     e.preventDefault(); 
     }); 
    }) 
</script> 

下面是这些文件包括：

<link rel="stylesheet" href="css/owl.carousel.min.css"> 

<script src="js/jquery.min.js"></script> 
<script src="js/owl.carousel.min.js"></script> 

<script src="js/owl.autoplay.js"></script> 
<script src="js/owl.autorefresh.js"></script> 
<script src="js/jquery.mousewheel.min.js"></script> 

<script src="js/highlight.js"></script> 
<script src="js/app.js"></script> 

感谢提前的帮助。

Answer 1

作为默认，所以你需要让自己的函数

在开始声明一个变量现在

var block = false; 

首先我们会去鼠标移到functon

不能作为选项提供

$(".owl-item").mouseenter(function(){ 
if(!block) { 
    block = true; 
    owl.trigger('stop.owl.autoplay') 
    block = false; 
    } 
}); 

现在使用相同的上述变量，我们将鼠标离开功能

$(".owl-item").mouseleave(function(){ 
if(!block) { 
    block = true; 
    owl.trigger('play.owl.autoplay',[1000]) 
    block = false; 
} 
}); 

希望其解答您的问题！