jquery - 带翻转的暂停功能

Question

我有一个旋转文本和图像的脚本。我想在翻转时暂停其功能，并在推出时继续。以下是代码。请帮助或建议。

$(document).ready(function(e) {
function nextMsg(i) {
    if (messages.length == i) {
        i = 0;
    }
    $('#message').html(messages[i]).fadeIn(500).delay(5000).fadeOut(500, function() {
        nextMsg(i + 1);
    });
};

var messages = [
    "Hello! <img src='../images/employees/01.png' />",
    "This is a website!<img src='../images/employees/02.png' />",
    "You are now going to be redirected.<img src='../images/employees/03.png' />",
    "Are you ready?<img src='../images/employees/04.png' />",
    "You're now being redirected...<img src='../images/employees/05.png' />"
    ];

$('#message').hide();

nextMsg(0);

});

Answer 1

你在寻找类似的东西

$(document).ready(function(e) {
    var msg = 0, hoverState = false, timeout;

    function scheduleNext() {
        timeout = setTimeout(function(){
            $('#message').fadeOut(500, function() {
                nextMsg();
            });
        }, 5000);
    }

    function nextMsg() {
        if (messages.length == msg) {
            msg = 0;
        }
        $('#message').html(messages[msg++]).fadeIn(500);
        scheduleNext();
    };

    var messages = [
        "Hello! <img src='../images/employees/01.png' />",
        "This is a website!<img src='../images/employees/02.png' />",
        "You are now going to be redirected.<img src='../images/employees/03.png' />",
        "Are you ready?<img src='../images/employees/04.png' />",
        "You're now being redirected...<img src='../images/employees/05.png' />"
    ];

    $('#message').hide().hover(function(){
        if(timeout) {
            clearTimeout(timeout);
        }
    }, function(){
        scheduleNext();
    });

    nextMsg();

});

演示：小提琴

Answer 2

我会这样做。未经测试，对不起..但希望是有道理的。

    var index = 0, hovered = false,
    messages = [
        "Hello! <img src='../images/employees/01.png' />",
        "This is a website!<img src='../images/employees/02.png' />",
        "You are now going to be redirected.<img src='../images/employees/03.png' />",
        "Are you ready?<img src='../images/employees/04.png' />",
        "You're now being redirected...<img src='../images/employees/05.png' />"
        ];

    $(function () {
      $(document).on('mouseenter', '#message', function () {
        hovered = true;
      })
      .on('mouseleave', '#message', function () {
        hovered = false;
      });
      window.setInterval(function () {
        if (!hovered) {
          $('#message').fadeOut(500, function () {
            $('#message').html(messages[index]).fadeIn(500);
            index = index === messages.length ? 0 : index + 1;
          });
        }
      }, 5000);

    });