javascript - 将计数变量设置在它所在的位置

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/