Question

我正在尝试使用jQuery在Cycle2幻灯片中获取当前幻灯片的图像大小。

这样我就可以设置出现在.hover（）上的叠加div（.overlay）的大小。正如您在此fiddle中看到的那样，它只是从第一张图片中获取大小。图像也会响应，因此.overlay还需要根据任何窗口大小调整来更新它的大小。

以下是fiddle链接，以及完整代码：

var imgwidth = $('.cycle-slide img').width();
var imgheight = $('.cycle-slide img').height();

$('.cycle-slide').hover(function () {        
    $('.overlay', this).css('width', imgwidth).css('height', imgheight).fadeIn();
    }, function() {
    $('.overlay', this).fadeOut();
});

如何让.overlay与每张幻灯片的图片大小相匹配？

非常感谢提前。

Answer 1

您可能应该挂钩cycle-after事件来设置宽度..类似于此：

$('.cycle-slideshow').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('.overlay', this).css({'width':$('img',incomingSlideEl).css('width'), 'height': $('img',incomingSlideEl).css('height')});
});


$('.cycle-slide').hover(function () {        
    $('.overlay', this).show();
    }, function() {
    $('.overlay', this).fadeOut();
});

您可能要做的唯一事情是设置事件外第一个叠加层的宽度和高度，因为我认为它不会在第一张幻灯片上被触发。

jQuery Cycle2 - 叠加大小以匹配幻灯片的图像大小

1 个答案: