ротаторы изображений на одной странице с jQuery

Question

после дня, пытаясь сделать это, я, наконец, решил обратиться за помощью ;-), так как я новичок в jQuery, я надеюсь найти кого-нибудь, кто поможет решить эту проблему. У меня есть страница портфолио, где мне нужно запустить галерею в рычании для каждого отдельного проекта. Все работает отлично, пока я не добавлю вторую галерею. Код, который у меня есть для каждого блока в моей HTML-разметке, выглядит следующим образом:

<ul class="rotator_details">
     <li><img src="big/01.jpg" alt=""></img></li>
     <li><img src="big/02.jpg" alt=""></img></li>
     <li><img src="big/03.jpg" alt=""></img></li>
</ul>

Jquery как так

function init_rotator_details() {

    if (!$('.rotator_details').length) {

        // If not, exit.
        return;
    }

    // Rotate speed.


    // Pause setting.
    var pause = false;

    // Rotator function.
    function rotate(element) {

        // Stop, if user has interacted.
        if (pause) {
            return;
        }

        // Either the next /first <li>.
        var $next_li = $(element).next('li').length ? $(element).next('li') : $('.rotator_details li:first');

        // Either next / first control link.
        var $next_a = $('.rotator_details_controls a.current').parent('li').next('li').length ? $('.rotator_details_controls a.current').parent('li').next('li').find('a') : $('.rotator_details_controls a:first');

        // Animate.
        $('.rotator_details_controls a.current').removeClass('current');
        $next_a.addClass('current');

        // Continue.
        function doIt() {
            rotate($next_li);
        }

        // Fade out <li>.
        $(element).fadeOut(400);

        // Show next <li>.
        $($next_li).fadeIn('fast', function() {

            // Slight delay.
            setTimeout(doIt, 3000);
        });
    }

    // Add click listeners for controls.
    $('.rotator_details_controls a').click(function() {

        // Change button text.
        //$('.rotator_details_play_pause').html('PLAY');
        $('.rotator_details_play_pause').html('PLAY').css({
            'backgroundPosition':'right'
        });

        // Show target, hide other <li>.
        var prev_next = $(this).attr('href');

        //$($(this).attr('href')).fadeIn('fast').siblings('li').fadeOut('fast');
        $("#"+prev_next).fadeIn(400).siblings('li').fadeOut(400);

        // Add class="current" and remove from all others.
        $(this).addClass('current').parent('li').siblings('li').find('a').removeClass('current');
        ;

        // Pause animation.
        pause = true;

        // Nofollow.
        this.blur();
        return false;
    });
    // Pause / Play the animation.
    $('.rotator_details_play_pause').click(function() {
        // What does the button say?
        if ($(this).html() === 'PAUSE') {
            // Stop rotation.
            pause = true;
            // Change the text.
            $(this).html('PLAY').css({
                'backgroundPosition':'right'
            });

        } else {
            // Remove class="pause".
            pause = false;
            // Start the rotation.
            rotate('.rotator_details li:visible:first');
            // Change the text.
            $(this).html('PAUSE').css({
                'backgroundPosition':'left'
            });
        }
        this.blur();
        return false;
    });
    // Hide all but first <li>.
    $('.rotator_details li:first').show();
    // Wait for page load.
    $(window).load(function() {
        // Begin rotation.
        rotate($('.rotator_details li:visible:first'));
    });
}

$(document).ready(function() {
    init_rotator_details();
});

Answer 1

Лучше всего использовать структуру class, чтобы они не перекрывали друг друга с таймаутами. Просто передайте объект new с таймаутами.

Answer 2

Вот лучшие примеры изображений ротаторов .... http://www.raghibsuleman.com/jquery-image-rotator-teaser