2012-12-20 42 views
1

我在主頁面中使用Supersized.js呈現背​​景。不幸的是,它不能正確渲染。我的腳本如下: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

你可以把這個放在一個js小提琴或稱爲測試頁的東西嗎?我真的很懷疑你的圖片能夠正確解析 – ShrekOverflow

+0

你jsfiddle壞了。請更新。 – JSuar

+0

@JSuar請重新檢查。謝謝:) – SidC

回答

1

仔細檢查你的文件擴展名嘗試.JPG而不是.jpg