无法在单独的 js 文件中调用 jquery 自定义函数



我正试图将我的幻灯片函数runShow()移动到一个单独的.js文件,名为 panzoomslidesshow .js这只是将我的脚本分离到另一个文件中,然后由所有页面使用。我可以得到调整触发器触发警报,但它不会调用runShow ()函数-我做错了什么?我以前能让它运行,但现在不行了!

脚本调用 panzoomslidesshow .js在我的网页的头部,这是在每次调整大小,runShow()函数在 panzoomslidesshow .js文件函数被调用:

<script type="text/javascript">         //*** This will reload the player upon resizing! ***\
var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(runShow(), 100);
});
</script>

我应该注意的是,我也试着把$(function(){})放在它周围,但是所有的变量都不能从runShow()函数访问,它不会运行…

panzoomslideshow.js ->

    var dur = 2000;
    var pDur = 4500;    
    var vp_width = window.innerWidth;
    var vp_height = window.innerHeight;
    var width_large = 880; 
    var height_large = 495; 
    var width_medium = 720; 
    var height_medium = 405;    
    var width_small = 480;  
    var height_small = 270; 
    var width_micro = 320;  
    var height_micro = 180;     
    var slide_width;
    var slide_height;
    var anim_width;
    var anim_height;    
    var margin_top;
    var margin_left;    
    alert("The Global variables are set, like vp_width and vp_height are "+vp_width+" and "+vp_height);
    runShow();  
function runShow() {
    if(vp_width <= 320){                        //SET Micro size
        slide_width = width_micro;
        slide_height = height_micro;
        anim_width = (width_micro * 1.2);
        anim_height = (height_micro * 1.2); 
        margin_top = -30;
        margin_left = -60;      
    } else if(vp_width <= 480){                 //SET small size
        slide_width = width_small;
        slide_height = height_small;
        anim_width = (width_small * 1.2);
        anim_height = (height_small * 1.2); 
        margin_top = -70;
        margin_left = -150;         
    } else if(vp_width <= 1140){                //SET Medium size
        slide_width = width_medium;
        slide_height = height_medium;
        anim_width = (width_medium * 1.2);
        anim_height = (height_medium * 1.2);    
        margin_top = -80;
        margin_left = -180;             
    } else if(vp_width <= 1400){                //SET Large size
        slide_width = width_large;
        slide_height = height_large;
        anim_width = (width_large * 1.2);
        anim_height = (height_large * 1.2);             
        margin_top = -100;
        margin_left = -200;
    } else {
        //do nothing since the screen size is too small???
    }       
    alert("runShow() is invoked! Slideshow Width and Height will be "+slide_width+" and "+slide_height+" The Global variables are set, like vp_width and vp_height are "+vp_width+" and "+vp_height);
    $(".carousel").carouFredSel({
        items: {
            visible: 1,
            width: slide_width,
            height: slide_height
        },
        scroll: {
            fx: "fade",
            easing: "linear",
            duration: dur,
            timeoutDuration: pDur,
            onBefore: function( data ) {
                animate( data.items.visible, pDur + ( dur * 3 ) );
            },
            onAfter: function( data ) {
                data.items.old.find( "img" ).stop().css({
                    width: slide_width,
                    height: slide_height,
                    marginTop: 0,
                    marginLeft: 0
                });
            }
        },
        onCreate: function( data ) {
            animate( data.items, pDur + ( dur *2 ) );
        }
    });
    function animate( item, dur ) {
        var obj = {
            width: anim_width,
            height: anim_height
        };
        switch( Math.ceil( Math.random() * 2 ) ) {
            case 1:
                obj.marginTop = 0;
                break;
            case 2:
                obj.marginTop = -80
                break;
        }
        switch( Math.ceil( Math.random() * 2 ) ) {
            case 1:
                obj.marginLeft = 0;
                break;
            case 2:
                obj.marginLeft = -170
                break;
        }
        item.find( "img" ).animate(obj, dur, "linear" );
    }
};

:)你试过这个吗?

$(document).ready(function () {
    //your javascript code
});

最新更新