Question

我试图将幻灯片显示功能runShow()移动到名为 panzoomslideshow.js 的单独的 .js 文件中这只是将我的脚本分成另一个文件，然后由我的所有页面使用。我可以通过调整大小触发器来触发警报，但它不会调用runShow ()函数 - 我做错了什么？我以前跑了，但现在我不能！

在我的网页页面中调用 panzoomslideshow.js 的脚本，这是每个调整大小的位置， panzoomslideshow.js中的runShow()函数调用文件函数：

<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 - ＆gt;

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

};

Answer 1

:) 你试过这个吗？

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

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

1 个答案: