是的
var h=$(window).height()
在css(传递给插件对象的设置)中,您必须编写
$('#slideshow').fadeSlideShow({
PlayPauseElement: false,
NextElement: false,
PrevElement: false,
ListElement: false,
width: '100%',
height: h+'px';
});
编辑
下面是使用SimpleFadeSlideShow插件进行全屏幻灯片放映的示例代码。但我仍然建议根据所需的幻灯片大小使用足够大的图像,以防止图像像素化。
<html>
<head>
<script src="jq.js" type="text/javascript"></script>
<script src="slideshow/fadeslideshow.js" type="text/javascript"></script>
<link href="slideshow/demostylesheet.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
var h=$(window).height();
var w=$(window).width();
$('#slideshow').css({
margin: '0px',
padding: '0px'
})
$('body').css('overflow','hidden')
$.when($('#slideshow').find('img').css
({
width: w+'px',
height: h+'px'
})
).then($('#slideshow').fadeSlideShow({
PlayPauseElement: false,
NextElement: false,
PrevElement: false,
ListElement: false,
width: w+'px',
height: h+'px'
})
)
$(window).on('resize',function(){
$(document).ready(function(){
$('body').css('overflow','visible')
$(window).scrollTop($(window).height())
$('#slideshow').find('*').css({
width: $(window).width()+'px',
height: $(window).height()+'px'
})
$('#slideshow').find('*').css({
width: $(window).width()+20+'px',
height: $(window).height()-$(window).scrollTop()+17+'px'
})
$(window).scrollTop(0);
$('body').css('overflow','hidden')
$('#slideshow').css({height : $(window).height()+'px', width: $(window).width()+'px'})
})
});
});
</script>
</head>
<body>
<ul id="slideshow" style="width: 640px; height: 480px; position: relative; overflow: hidden;">
<li style="position: absolute; width: 640px; height: 480px; display: list-item;">
<img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/3.jpg" width="640" height="480" border="0" alt="">
</li>
<li style="position: absolute; width: 640px; height: 480px; display: list-item;">
<img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/2.jpg" width="640" height="480" border="0" alt="">
</li>
<li style="position: absolute; width: 640px; height: 480px; display: list-item; opacity: 0.7128896457825363;">
<img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/1.jpg" width="640" height="480" border="0" alt="">
</li>
</ul>
</body>
</html>