Javascript 在chrome中切换选项卡后，猫头鹰转盘停止_Javascript_Jquery_Html_Css_Owl Carousel

Javascript 在chrome中切换选项卡后，猫头鹰转盘停止

javascript jquery html css

Javascript 在chrome中切换选项卡后，猫头鹰转盘停止,javascript,jquery,html,css,owl-carousel,Javascript,Jquery,Html,Css,Owl Carousel,嗨，我正在试验owl转盘中的自动播放功能，但是，每当我切换到chrome中的另一个web选项卡，并带着转盘返回我的网页时，它就会停止工作，除非我在图像上拖动它。以下是我的html和jquery代码： <!DOCTYPE html> <html> <head lang="en"> <title>MySite</title> <meta charset="utf-8"> &l

嗨，我正在试验owl转盘中的自动播放功能，但是，每当我切换到chrome中的另一个web选项卡，并带着转盘返回我的网页时，它就会停止工作，除非我在图像上拖动它。以下是我的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>


麦斯特
$（文档）.ready（函数（）{
var owl=$（“.owl carousel”）
猫头鹰旋转木马({
项目：1，
循环：对，
差额：10，
自动播放：对，
自动播放超时：3000，
自动播放暂停：false
});
触发器（'play.owl.autoplay'，[5000]）；
});

您可以尝试使用

并尝试同时使用.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]);});
    });

});

我希望这对您有所帮助

您可以尝试使用

并尝试同时使用.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]);});
    });

});

我希望这能有所帮助，以下是答案

$(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);
});

试试这个，它会有用的。享受：D

这是答案

$(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);
});

试试这个，它会工作的。享受：D

你可以简单地触发下一个滑动按钮。它对我很有效：

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

您可以简单地触发下一个滑动按钮。它对我很有效：

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

我使用版本2.2.0保存问题我使用版本2.2.0保存问题