0

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

这样我就可以设置.overlay出现在 .hover() 上的覆盖 div () 的大小。正如您将在此小提琴中看到的，它仅从第一张图像中获取大小。图像也会响应，因此.overlay还需要根据任何窗口调整大小来更新它的大小。

这是小提琴链接，以及完整的代码：

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匹配每张幻灯片的图像大小？

提前谢谢了。

4

1 回答 1

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();
});

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

于 2013-04-08T18:22:37.070 回答