0

我在 jQuery 中编写了一个函数，它可以像旋转木马一样旋转一系列文本块。我setInterval用来启动一个在循环中运行的计时器，它在页面加载时自动启动，暂停mouseenter事件，然后应该在mouseleave事件上恢复。

暂停适用于第一个实例，但如果您再次输入鼠标div.testimonials，该功能不会暂停。这是我的 HTML：

<div class='testimonials'>
          <div class='testimonials-users row hidden-phone'>
            <div class='span1'> <a class='testimonials-user-w active' data-toggle='testimonial' href='#testimonial1'> <span class='testimonials-user'><img alt="Avatar-1" src="images/test-user.png" /></span> </a> </div>
            <div class='span1'> <a class='testimonials-user-w' data-toggle='testimonial' href='#testimonial2'> <span class='testimonials-user'><img alt="Avatar-2" src="images/test-user.png" /></span> </a> </div>
            <div class='span1'> <a class='testimonials-user-w' data-toggle='testimonial' href='#testimonial3'> <span class='testimonials-user'><img alt="Avatar-4" src="images/test-user.png" /></span> </a> </div>
          </div>
          <div class='testimonials-speeches'>
            <div class="testimonials-speech active" id="testimonial1">
              <p> <strong>Homer Simpson is amazing.</strong> I've worked with Homer on couple of projects and i really like how lazy he is. Sleeps a lot, does not compain much, a perfect employee. </p>
              <div class="speech-by"> Mr. Burns, Springfield Nuclear Power Plant </div>
            </div>
            <div class='testimonials-speech' id='testimonial2'>
              <p> <strong>Nulla gravida tellus id fermentum.</strong> Phasellus aliquet lobortis dolor, vel aliquam tortor porta vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. </p>
              <div class='speech-by'> John Doe, Dundler Mufflin </div>
            </div>
            <div class='testimonials-speech' id='testimonial3'>
              <p> <strong>Aliquam at sodales arcu.</strong> Nulla gravida, tellus id fermentum tempus, urna elit tempus justo, a tincidunt dui lacus nec est. Maecenas ligula ipsum, suscipit quis posuere id, porttitor vitae odio. Phasellus cursus mauris nec felis sollicitudin ac semper quam hendrerit. Morbi sagittis lobortis libero id imperdiet. </p>
              <div class='speech-by'> John Doe, Dundler Mufflin </div>
            </div>
          </div>
        </div>

...这是我的 jQuery：

$(function () {
    var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000); // set interval timer

    function abortTestimonialTimer() { // to be called when you want to stop the timer
        clearInterval(rotateTestimonialTimer);
    }

    function rotateTestimonials() { 
        // Speeches
        var activeSpeech = $('.testimonials-speeches .testimonials-speech.active');
        // If last, loop to first
        if($('.testimonials-speeches .testimonials-speech').last().hasClass('active')) {
            var nextSpeech = $('.testimonials-speeches .testimonials-speech').first();
        } else {
            var nextSpeech = activeSpeech.next('.testimonials-speech');
        }
        var nextSpeechId = nextSpeech.attr('id');

        // Users
        var activeUser = $('a.testimonials-user-w.active');
        var nextUser = $('a.testimonials-user-w[href*="' + nextSpeechId + '"]');

        // Swap active class
        activeSpeech.removeClass('active');
        activeUser.removeClass('active');
        nextSpeech.addClass('active');
        nextUser.addClass('active');

    }
    $('div.testimonials').on('mouseenter', function(){ // Pause on mouseenter
    abortTestimonialTimer(); 
});
$('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave
    var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000);
});
});

知道为什么这只是第一次暂停吗？我认为这与我的计时器的启动和停止有关。

4

1 回答 1

3

替换这个

$('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave
    var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000);
});

和

$('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave
    rotateTestimonialTimer = setInterval(rotateTestimonials, 1000);
});

在该var特定范围内定义新变量。

于 2013-01-03T17:17:45.803 回答