2013-10-27 8 views
0

我有一個JavaScript的橫幅,具有默認的寬度和高度,我想添加視圖端口高度。 (我不能100%或自動,因爲該插件不工作,我應該添加像100px等數值)。以下是JavaScript的添加查看端口高度到Javascript插件

 <script type="text/javascript"> 
$(document).ready(function(){ 
    var h=$(window).height(); 
    $('#slideshow').fadeSlideShow({ 
     PlayPauseElement: false, 
     NextElement: false, 
     PrevElement: false, 
     ListElement: false, 
     width: '100%', 
     height: h+'px' 
    }); 

    }); 
</script> 

請諮詢我..

非常感謝

+0

下一次請不要根據給出的答案修改您的問題(如果發佈時您沒有發現錯誤或錯誤),因爲這會混淆其他人提到的問題並且他們可以解釋答案人在答案中重新發布了問題代碼,這將導致對答案的投票減少。 – UDB

+0

@UDB原諒我的錯誤.. – Gops

回答

0

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> 
+0

我試圖將值添加到CSS,但它只能從JavaScript的 $服用高度(「#幻燈片」)fadeSlideShow({ \t \t PlayPauseElement:假的, \t \t NextElement:假, \t \t PrevElement:假, \t \t ListElement:假, \t \t寬度: '100%', \t \t高度:H,//這裏我需要添加 \t}); – Gops

+0

@Gops我沒有得到你你是什麼意思,從JavaScript採取的高度? – UDB

+0

我試着添加一個像#slideshow li img {height:900 px;寬度:100%}但腳本呈現時,它只給出了在JavaScript中給出的高度.. – Gops