javascript - jquery循环后获取图像宽度?

标签 javascript jquery resize jquery-cycle

我一直在尝试为 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

最佳答案

我在这里看到几个问题:

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

粗略调查表明该插件确实支持通过其“after”参数进行回调,因此请尝试以下操作:

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

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

slideImageWidth = $('#slideshow img:visible').width()

关于javascript - jquery循环后获取图像宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4466713/

相关文章:

javascript - 如何使用 React.js Flux 架构和 McFly 中的操作处理 API 调用?

javascript - 将上传的图片插入到 summernote 编辑器

jquery - 防止内容换行可编辑 DIV

jQuery:动态设置div高度并在窗口调整大小时更改

javascript - 在 Vue js 中全局读取配置,如 Mixins

javascript - 计算在输入字段中接受空格

javascript - jQuery 打字功能

javascript - PDF对象 : How to reload container with a different copy of the same file?

javascript - 更改字体大小时调整 UIWebview 框架的大小

swing - 斯卡拉 Swing : draggable/resizable component trait