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

经过一天的努力，我终于决定寻求帮助；-），由于我是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

函数初始化旋转器详细信息（）{
如果（！$（'.rotator_详细信息'）。长度）{
//如果没有，退出。
返回；
}
//转速。
//暂停设置。
var暂停=假；
//旋转器功能。
函数旋转（元素）{
//如果用户已交互，则停止。
如果（暂停）{
返回；
}
//下一个/第一个
。
变量$next_li=$（元素）。next（'li'）。长度？$（元素）。next（'li'）：$（'rotator_详细信息li:first'）；
//下一个/第一个控制链路。
var$next_a=$（'.rotator_details_控制a.current'）。父项（'li'）。下一项（'li'）。长度？$（'.rotator_details_控制a.current'）。父项（'li'）。下一项（'li'）。查找（'a'）：$（'.rotator_details_控制a:first'）；
//制作动画。
$（'.rotator_details_controls a.current'）。removeClass（'current'）；
$next_a.addClass（“当前”）；
//继续。
函数doIt（）{
轮换（$next_li）；
}
//淡出
。
$（元素）。淡出（400）；
//显示下一个
。
$（$next_li）.fadeIn（'fast'，function（）{
//稍有耽搁。
setTimeout（doIt，3000）；
});
}
//为控件添加单击侦听器。
$（'.rotator\u details\u controls a'）。单击（函数（）{
//更改按钮文本。
//$（'.rotator\u details\u play\u pause'）.html（'play'）；
$（'.rotator\u details\u play\u pause'）.html（'play'）.css({
“背景位置”：“正确”
});
//显示目标，隐藏其他
。
var prev_next=$（this.attr（'href'）；
//$（$（this.attr（'href'））.fadeIn（'fast'）。同胞（'li'）。fadeOut（'fast'）；
$（“#”+prev_next）.fadeIn（400）.兄弟姐妹（'li'）.fadeOut（400）；
//添加class=“current”并从所有其他文件中删除。
$（this）.addClass（'current'）。父类（'li'）。同级（'li'）。查找（'a'）。removeClass（'current'）；
;
//暂停动画。
暂停=正确；
//不跟。
这个。blur（）；
返回false；
});
//暂停/播放动画。
$（'.rotator\u details\u play\u pause'）。单击（函数（）{
//按钮上写着什么？
如果（$（this.html（）=='PAUSE'）{
//停止旋转。
暂停=正确；
//更改文本。
$（this.html（'PLAY'）.css({
“背景位置”：“正确”
});
}否则{
//删除class=“暂停”。
暂停=错误；
//开始旋转。
旋转（'.rotator_details li:visible:first'）；
//更改文本。
$（this.html（'PAUSE'）.css({
“背景位置”：“左”
});
}
这个。blur（）；
返回false；
});
//隐藏除第一个以外的所有内容
。
$（'.rotator_details li:first'）.show（）；
//等待页面加载。
$（窗口）。加载（函数（）{
//开始旋转。
旋转（$（'.rotator_details li:visible:first'）；
});
}
$（文档）.ready（函数（）{
初始旋转器详细信息（）；
});

以下是图像旋转器的最佳示例。。。。

---

您最好的选择是使用

类

结构，这样两者就不会因超时而重叠。只需传递带有超时的

new

对象。

这并不是一个真正适合你的答案，而是一些提示

$（$next\u li）

是不必要的，只需使用

$next\u li

，因为变量已经是jQuery对象。避免多次调用jQuery函数（其中有3次

$（element）

），运行一次并将其放入变量中。是否在文档准备好之前或之后添加第二个库？

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();
});