0

通过使用本教程从头开始构建旋转器脚本，我将自定义图像标题转换为图像旋转器：http: //fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator。我通过教程一步一步地输入代码，但是当我尝试运行时，Firebug 控制台给出了这个错误：

ReferenceError：rotateImages 未定义

xx = setInterval('rotateImages()', 4000);

考虑到我可能打错了一行代码，我从工作演示中复制了脚本，我收到了同样的错误。

我在 .js 文件中运行此脚本：

(function($) {
$(document).ready(function() {

    //loop through pictures
    $('.headerpic_inner').each(function(e) {
        if(e == 0) {
            $(this).addClass('current');
        }

        $(this).attr('id', 'handle' + e);

    });


    //loop through tags
    $('.tabs li').each(function(e) {
        if(e == 0) {
            $(this).addClass('current');
        }

        $(this).wrapInner('<a class="title"></a>');
        $(this).append('<a><img /></a>');
        $(this).children('a').attr('href', '#handle' + e);
        y = $('#handle' + e + ' img').attr('src');
        $(this).find('img').attr('src', y);
        t = $(this).children('a').text();
        $('#handle' + e).append('<h2>' + t + '</h2>');

    });


    //change image on click
    $('.tabs li a').click(function() {

        c = $(this).attr('href');
        if($(c).hasClass('current')) {
            return false;
        } else {
            showImage($(c), 20);
            $('.tabs li').removeClass('current');
            $(this).parent().addClass('current');
            return false;
        }

    });




    //call to rotate images
    runRotateImages();
    $('#headerpic').hover(function() {
        clearTimeout(xx);
    },
    function() {
        runRotateImages();
    });





}); //end of $(document).ready function



//showImage function
function showImage(img, duration) {
    $('.headerpic_inner').removeClass('current').css({
        'opacity' : 0.0,
        'zIndex' : 2,
    });

    img.animate({opacity:1.0}, duration, function() {
        $(this).addClass('current').css({zIndex:1});

    });

}


//rotateImages function
function rotateImages() {
    var curPhoto = $('div.current');
    var nxtPhoto = curPhoto.next();
    var curTab = $('.tabs li.current');
    var nxtTab = curTab.next();

    if(nxtPhoto.length == 0) {
        nxtPhoto = $('#headerpic div:first');
        nxtTab = $('.tabs li:first-child');
    }

    curTab.removeClass('current');
    nxtTab.addClass('current');
    showImage(nxtPhoto, 300);

}

//runRotateImages function
function runRotateImages() {
    xx = setInterval('rotateImages()', 4000);
}




})(jQuery);

谁能告诉我为什么会说 rotateImages() 没有定义？

4

3 回答 3

1

其他答案提供了修复，但他们没有解释为什么您的代码不起作用。我要刺一下：

setInterval()实际上可以将带引号的参数作为字符串，您的原始代码实际上在语法上是正确的：

xx = setInterval('rotateImages()', 4000);

那么为什么它不起作用呢？当您使用引号传递参数时，setInterval()调用将在函数的全局范围内查找rotateImages()。问题是，您的函数rotateImages()是在闭包中定义的。您的整个代码使用以下方法包装：

(function($) {
    $(document).ready(function() {


    });
})(jQuery);

建议的修复setInterval(rotateImages, 4000)有效，因为当您传递不带引号和不带括号的函数名称时，setInterval()将首先在函数的本地范围内查找函数并可以调用它。

于 2013-01-09T12:56:49.237 回答
1 
var xx = setInterval(rotateImages, 4000);

你必须像上面那样设置间隔。

于 2013-01-09T12:44:25.697 回答
0

只需从它周围删除单引号，它应该可以工作。

试试这样：

xx = setInterval(rotateImages, 4000);
于 2013-01-09T12:46:11.670 回答