0

テキストと画像を回転させるスクリプトがあります。ロールオーバー時にその機能を一時停止し、ロールアウト時に継続したい。以下はコードです。ヘルプまたはアドバイスをお願いします。

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

});
4

2 に答える 2

0

私はこのようなことをします。テストされていません、申し訳ありません..しかし、うまくいけば理にかなっています。

    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);

    });
于 2013-03-26T04:51:16.687 に答える
0

次のようなものを探していますか

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

});

デモ:フィドル

于 2013-03-26T04:44:48.453 に答える