Question

我已经使用jQuery制作了这个简单的内容旋转器，但是正如你所看到的，我已经创建了一个mouseenter函数，以便当你的鼠标放在旋转器上时旋转器会停止。

我的问题是，如果我鼠标进入并离开函数 rotateReview（）重新启动并且计数变量（数字）为1.所以我的旋转器自动开始，他应该继续下一个。

HTML：

<div id="review_rotator">
   <div class="rotator">
      <article>Content</article>
      <article>Content</article>
      <article>Content</article>
      <article>Content</article>
   </div><!--End .rotator-->
</div><!--End #review_rotator-->

的jQuery

function rotateReview() {
    var turn = $('#review_rotator article');
    var numbers = turn.length;
    var number = 1;
    intv = setInterval(function() {
        number++;
        turn.fadeOut(300);
        $('#review_rotator article:nth-child('+number+')').fadeIn(200);
        if(numbers == number)
            number = 0;
    }, 4500)
}
rotateReview();

$(document).on('mouseenter mouseleave', '#review_rotator article', function(e) {
    var mEnt = e.type == 'mouseenter';
    if(mEnt) {
        clearInterval(intv);
    } else {
        rotateReview();
    }
})

Answer 1

你可以这样做：

function rotateReview() {
    var turn = $('#review_rotator article');
    intv = setInterval(function() {
        var next = ($('#review_rotator article[style*="display: block"]')).next()[0];
        if(next == undefined)
            next = turn[0];
        console.log(next);
        turn.fadeOut(300);
        $(next).delay(300).fadeIn(200);
    }, 1000)
}

检查出来：http://jsfiddle.net/b53t39u7/

Answer 2

每次运行rotateReview时，变量number都会被赋值为1.所以你应该将它存储在函数之外或其他地方，这样变量number就不会在函数rotateReview完成后释放。

我会给出2个解决方案。

1。作为全局变量

var number = 1;

function rotateReview() {
    var turn = $('#review_rotator article');
    var numbers = turn.length;

    intv = setInterval(function() {
        number++;
        turn.fadeOut(300);
        $('#review_rotator article:nth-child('+number+')').fadeIn(200);
        if(numbers == number)
            number = 0;
    }, 4500)
}

2。存放在关闭

如果你不喜欢全局变量，你可以将它存储在一个闭包中，这是一个立即调用的函数。

var rotateReview  = (function () {
    var number = 1;

    return function () {
        var turn = $('#review_rotator article');
        var numbers = turn.length;

        intv = setInterval(function() {
            number++;
            turn.fadeOut(300);
            $('#review_rotator article:nth-child('+number+')').fadeIn(200);
            if(numbers == number)
                number = 0;
        }, 4500)
    }
}());

将计数变量设置在哪里

2 个答案:

1。作为全局变量

2。存放在关闭