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

与jQuery在同一页面中的图像旋转器

2 个答案: