0

我正在尝试使用 jQuery Cycle 创建图像旋转器。该图像具有一些响应大小的组件（现阶段不是完全响应的站点......我知道......这仍在开发中）。本质上，我希望图像居中，因为它在具有定义高度的空间内与浏览器一起调整大小（需要在大屏幕上查看才能看到）。我可以在没有旋转器功能的情况下将图像垂直居中，但是确定图像定位的 jQuery 函数在页面加载和浏览器调整大小时执行……而不是在图像随 Cycle 旋转时执行。最初看起来不错，但是稍微调整浏览器的大小，您会看到图像向下移动。

这是垂直居中的代码：

var imageHeight, overlap, container = $('.banner'); 

function centerImage() {
    imageHeight = container.find('img').height();
    overlap = (520 - imageHeight) / 2;
    container.find('img').css('margin-top', overlap);
}

$(window).on("load resize", centerImage);

以防万一，这是我的循环函数调用：

$('#banner_items').cycle({ 
    speed:  1000,
    timeout: 3000,
    slideResize: 0,
    slideExpr: '.banner'        
});

该网站的链接是：www.envisiondemo.com/planview

关于如何使这项工作一起工作的任何建议？

4

0 回答 0