Supersized.js背景不在母版页中呈现

时间:2012-12-20 04:28:41

标签: javascript asp.net supersized

我在母版页中使用Supersized.js来渲染背景。不幸的是,它无法正确渲染。我的脚本如下:

<script type="text/javascript" src="<%=ResolveClientUrl("~/js/jquery.js")%>"></script>
        <script type="text/javascript" src="<%=ResolveClientUrl("~/js/jquery.easing.js")%>">
        </script>
        <script type="text/javascript" src="<%=ResolveClientUrl("~/js/supersized.js")%>">
        </script>

        <script type="text/javascript">
            var i360DealerSite = i360DealerSite || {};
            $(function () {

                    i360DealerSite.BG.init();
                });
                i360DealerSite.BG = {
                    init: function () {
                $.supersized({
                    // Functionality
                    slideshow: 1,           // Slideshow on/off
                    autoplay: 1,            // Slideshow starts playing 
                                                            automatically
                    start_slide: 1,         // Start slide (0 is random)
                    stop_loop: 0,           // Pauses slideshow on last slide
                    random: 0,          // Randomize slide order (Ignores start 
                                                            slide)
                    slide_interval: 3000,       // Length between transitions
                    transition: 6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide 
                                                            Right, 4-Slide Bottom, 5-Slide Left, 
                                                            6-Carousel Right, 7-Carousel Left
                    transition_speed: 1000,     // Speed of transition
                    new_window: 1,          // Image links open in new window/tab
                    pause_hover: 0,         // Pause slideshow on hover
                    keyboard_nav: 1,            // Keyboard navigation on/off
                    performance: 1,         // 0-Normal, 1-Hybrid speed/quality, 2-
                                                           Optimizes image quality, 3-Optimizes  
                                                           transition speed 
                                                        // (Only works for Firefox/IE, not 
                                                           Webkit)
                    image_protect: 0,       // Disables image dragging and right 
                                                           click with Javascript

                    // Size & Position                         
                    min_width: 0,           // Min width allowed (in pixels)
                    min_height: 0,          // Min height allowed (in pixels)
                    vertical_center: 1,     // Vertically center background
                    horizontal_center: 1,       // Horizontally center background
                    fit_always: 0,          // Image will never exceed browser 
                                                            width or height (Ignores min. 
                                                            dimensions)
                    fit_portrait: 1,            // Portrait images will not exceed 
                                                            browser height
                    fit_landscape: 0,       // Landscape images will not exceed 
                                                            browser width

                    // Components                           
                    slide_links: 'blank',   // Individual links for each slide (Options: 
                                                 false, 'number', 'name', 'blank')
                    thumb_links: 1,         // Individual thumb links for each slide
                    thumbnail_navigation: 0,        // Thumbnail navigation
                    slides: [
                        //ADD OR REMOVE IMAGES HERE!!!
                        { image: '<%=ResolveClientUrl("~/images/banner/banner01.jpg")%>' },
                        { image: '<%=ResolveClientUrl("~/images/banner/banner02.jpg")%>' }
                    ]
                });
            }
            };
        </script>

jsfiddle位于here

在上面的脚本中必须修改什么才能确保后台呈现?

有问题的site没有旋转横幅图片,尽管下面引用了几个。

1 个答案:

答案 0 :(得分:1)

仔细检查您的文件扩展名,试试.JPG而不是.jpg