4

ウィンドウのサイズを変更してからスライダーを更新すると、ブラウザの幅に合わせて画像のサイズが変更されますが、ウィンドウのサイズ変更時にこれを自動的に行う必要があります....どうすればできますか??

http://subzerostudio.com/Clients/perkinreveller/test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$('.slideshow').cycle({
    timeout: 400,
    fx: 'scrollHorz',
    next: '#next',
    prev: '#prev',

});

});

</script>

</head>

<body>




<style>
body {
margin:0; padding:0;
height:100%;
width:100%;
position:absolute;
}

#slideshow-wrapper {
width:100%;
min-width:600px;
}

.slideshow {
width:100%;
}
.slideshow div,
.slideshow div img {
width:100% !important;
min-width:100%;
height:auto;
}

</style>


<div class="slideshow">

 <div>
     <img src="images/img1.jpg" alt="" />
 </div>

 <div>
     <img src="images/img1.jpg" alt="" />
 </div>

 <div>
     <img src="images/img1.jpg" alt="" />
 </div>

</div>    


</body>
</html>
4

4 に答える 4

3

こうやってなんとかできた……。

$(document).ready(function() {


$('#slideshow').cycle({

slideResize: true,
containerResize: true,
width: '100%',
height: '100%',
fit: 1,

fx: 'fade',
next: '#next',
prev: '#prev',  

});

});

これがこの問題を解決しようとしている人に役立つことを願っています (私はまだ完全にテストしていませんが、ページャー ボタンを挿入すると再生されるように見えます。同様に、scrollHorz などの fx を使用すると、それが台無しになるようです..)

于 2012-07-13T09:58:11.073 に答える
0

同様の投稿はここにありますJavaScriptウィンドウのサイズ変更イベント

window.onresize = function(event) {
   $('.slideshow').cycle({
     timeout: 400,
     fx: 'scrollHorz',
     next: '#next',
     prev: '#prev',

   });

}

それが役立つかどうかを確認してください

于 2012-07-13T09:28:42.403 に答える