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 
var xx = setInterval(rotateImages, 4000);

上記のようにIntervalを設定する必要があります。

于 2013-01-09T12:44:25.697 に答える
1

他の回答は修正を提供しましたが、コードが機能しない理由を説明していませんでした。私は刺します：

setInterval()引用符で囲まれた引数を実際に文字列として受け取ることができます。元のコードは実際には構文的に正しいです。

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

では、なぜそれが機能しないのですか？引数を引用符で囲むと、setInterval()呼び出しは関数のグローバルスコープを検索しますrotateImages()。問題は、関数rotateImages()がクロージャ内で定義されていることです。コード全体は、次を使用してラップされます。

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


    });
})(jQuery);

setInterval(rotateImages, 4000)引用符や括弧なしで関数名を渡すと、setInterval()最初に関数のローカルスコープが検索され、そこで関数が検出されて呼び出されるため、推奨される修正が機能します。

于 2013-01-09T12:56:49.237 に答える
0

その周りから一重引用符を削除するだけで、機能するはずです。

このようにしてみてください：

xx = setInterval（rotateImages、4000）;
于 2013-01-09T12:46:11.670 に答える