它
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;">
<!-- This is the last image in the slideshow-->
<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>
<!-- This is the first image in the slideshow -->
</ul>
</body>
</html>
來源
2013-10-27 15:16:24
UDB
下一次請不要根據給出的答案修改您的問題(如果發佈時您沒有發現錯誤或錯誤),因爲這會混淆其他人提到的問題並且他們可以解釋答案人在答案中重新發布了問題代碼,這將導致對答案的投票減少。 – UDB
@UDB原諒我的錯誤.. – Gops