[英]Supersized.js Background Not Rendering in Master Page
I'm using Supersized.js in a master page to render a background. 我在母版页中使用Supersized.js渲染背景。 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 jsfiddle位于此处
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. 尽管以下引用了多个站点 ,但该站点并未旋转横幅图像。
仔细检查文件扩展名,尝试使用.JPG而不是.jpg
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.