Question

我遇到了猫头鹰旋转木马'自动播放'功能的问题。我上传并包含了所有需要的文件。它在负载上正常工作。自动播放效果很好。但当我在任何幻灯片上悬停时它会停止（并且我想停止悬停）。当我释放鼠标时，它不再播放。此外，当我在浏览器的不同选项卡之间切换并返回到旋转木马打开的选项卡时，它也会在该点永久停止。我需要用鼠标点击或鼠标滚动它然后再次播放。

无法弄清楚问题是什么。我已经咨询了官方的“猫头鹰旋转木马”网站以及这些线程以及线程01，线程02，线程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

尽量不在owl carousel的边界内找到解决方案，我们可以创建自己的函数

var block = false;
$(".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;
 }
});

猫头鹰旋转木马自动播放在鼠标悬停时无法正常工作？

1 个答案: