Question

我已经使用本教程从头开始构建旋转器脚本，将自定义图像标头转换为图像旋转器：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);

有谁可以告诉我为什么会说旋转角度（）没有定义？

Answer 1

var xx = setInterval(rotateImages, 4000);

你必须像上面那样设置setInterval。

Answer 2

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

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

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

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

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


    });
})(jQuery);

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

Answer 3

只需删除周围的单引号即可。

试试这样：

xx = setInterval(rotateImages, 4000);

jQuery图像旋转器：函数未定义

3 个答案: