1

我一直在尝试为 jquery 周期实现 javascript 调整大小，但是当我转到下一张幻灯片并调整浏览器窗口的大小时，我失去了图像的宽度，一切都变得很糟糕。不知道下一步该怎么做...

这是javascript：

jQuery(function($) {
function resizeImage() {
var slideImageHeight = $(window).height()-110,
    slideImageWidth = $('#slideshow img').width(),
    slideShowImageHeight = $(window).height()-123;

    $('.gallery_item').css('height', slideImageHeight);
    $('#slideshow img').attr('height', slideImageHeight);

    $('#slideshow').css('height', slideShowImageHeight);
    $('#slideshow img').attr('height', slideShowImageHeight);

    $('.pgwrap').css('width',slideImageWidth);
};
$(window).resize(function(){
     resizeImage();
}).trigger('resize');

$(window).load(function(){
     resizeImage();
});

$('#slideshow').cycle({
    fx:     'scrollHorz', 
    speed: 200, 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0 
});

});

你也可以在这里看到它正在运行。http://stoorage.com/index2.html

4

1 回答 1

1

我在这里看到几个问题：

1) '#slideshow img' 不是离散的，因为#slideshow 中有多个图像。2）调整大小函数本身在窗口加载和调整大小时调用，但不是在循环图像后调用。

粗略调查表明该插件确实通过其“后”参数支持回调，所以试试这个：

$('#slideshow').cycle({
  fx:     'scrollHorz', 
  speed: 200, 
  prev:   '#prev', 
  next:   '#next', 
  timeout: 0,
  after: resizeImage 
});

我认为您可以通过像这样扩展选择器来缓解问题 1)：

slideImageWidth = $('#slideshow img:visible').width()
于 2011-01-10T17:17:42.837 回答