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不旋轉橫幅圖像,儘管幾個被引用下面。
你可以把這個放在一個js小提琴或稱爲測試頁的東西嗎?我真的很懷疑你的圖片能夠正確解析 – ShrekOverflow
你jsfiddle壞了。請更新。 – JSuar
@JSuar請重新檢查。謝謝:) – SidC