Question

我有一个具有默认宽度和高度的javascript横幅，我想添加视图端口高度。（我不能100％或自动，因为插件不起作用。我应该添加像100px等值）。下面是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>

请建议我..

非常感谢

Answer 1

它是

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>

将View port height添加到Javascript插件

1 个答案: