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 に答える