Question

嗨我正在尝试使用猫头鹰旋转木马中的自动播放功能，但每当我切换到Chrome中的另一个网页标签并使用旋转木马返回我的网页时，它会停止工作，除非我对图像进行拖动。这是我的html和jquery代码：

<!DOCTYPE html>
    <html>

    <head lang="en">
      <title>MySite</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="owl.carousel.min.css">
      <link rel="stylesheet" href="owl.theme.default.min.css">
      <script type="text/javascript" src="jquery.js"></script>
      <script src="owl.carousel.min.js"></script>
    </head>

    <body>
      <div class="owl-carousel">
        <div> <img src="1.jpg"></div>
        <div> <img src="2.jpg"></div>
        <div> <img src="3.jpg"></div>
        <div> <img src="4.jpg"></div>
        <div> <img src="5.jpg"></div>
        <div> <img src="6.jpg"></div>
      </div>

    <script>
    $(document).ready(function(){
      var owl = $(".owl-carousel")
      owl.owlCarousel({
        items:1,
        loop:true,
        margin:10,
        autoplay:true,
        autoplayTimeout:3000,
        autoplayHoverPause:false
      });

      owl.trigger('play.owl.autoplay',[5000]);
    });
    </script>
    </body>

    </html>

Answer 1

您可以尝试使用ifvisible.js

尝试同时使用.blur和.focus命令，否则无效

这是我网站的实施

jQuery(window).ready(function(){

var owl = jQuery('.owl-carousel');
owl.owlCarousel({
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:2000,
    dots:false,
    responsive:{
        0:{
            items:2 
        },
        620:{
            items:3
        },
        992:{
            items:4
        },
        1200:{
            items:6
        }
        }
        })
jQuery('.owl-carousel .owl-item').on('mouseenter',function(e){
    jQuery(this).closest('.owl-carousel').trigger('stop.owl.autoplay');
})
jQuery('.owl-carousel .owl-item').on('mouseleave',function(e){
    jQuery(this).closest('.owl-carousel').trigger('play.owl.autoplay',[2000]);
})
    ifvisible.blur(function(){

        owl.trigger('stop.owl.autoplay',[2000]);

    });

    ifvisible.focus(function(){

        owl.trigger('play.owl.autoplay',[2000]);});
    });

});

我希望这会有所帮助

Answer 2

这是答案

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                owl.trigger('stop.owl.autoplay');
                break;
            case "focus":
                // do work
                owl.trigger('play.owl.autoplay', [1000]);
                break;
        }
    }

    $(this).data("prevType", e.type);
});

试试这个它会起作用ENJOY：D

Answer 3

您只需触发下一个幻灯片按钮即可。它对我很有用：

$(window).on('focus', function () {
    $('.owl-next').trigger('click');
});

切换铬合金标签后，猫头鹰旋转木马停止

3 个答案: