Supersized.js Background Not Rendering in Master Page

Question

I'm using Supersized.js in a master page to render a background. Unfortunately, it is not rendering correctly. My script is as follows:

<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>

The jsfiddle is located here

What must be modified in the above script to ensure that the background renders?

The site in question is not rotating the banner images despite several being referenced below.

Answer 1

仔细检查文件扩展名，尝试使用.JPG而不是.jpg