Question

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

无法弄清楚问题是什么。我咨询了官方的＃猫头鹰旋转木马＆＃34;网站和这些主题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;

现在我们首先选择鼠标而不是功能

$(".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 个答案: