0

デフォルトの幅と高さを持つ JavaScript バナーがあります。それにビュー ポートの高さを追加したいと思います。(プラグインが動作しないため、100% または auto を指定することはできません。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>

アドバイスお願いします..

どうもありがとう

4

1 に答える 1

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>
于 2013-10-27T15:16:24.230 に答える