jQuery 循环插件，将图像置于 div 中居中

Question

我正在寻找使用 JQuery 循环插件来循环浏览一组图像。所有图像的大小都不同，我希望它们全部位于容器“幻灯片”DIV 内的中心，并使用“淡入淡出”过渡，而不是默认的左上角。

我添加了一个“Before”回调，在加载之前使用以下代码设置对象的顶部和左侧:

function onBeforeGallerySlide(){
  //Get image size
  var imgHeight = $(this).height();
  var imgWidth = $(this).width();

  //Get container size
  var slider = $(this).parent();
  var containerHeight = slider.height();
  var containerWidth = slider.width();

  var top = Math.floor((containerHeight / 2) - (imgHeight / 2));
  var left = Math.floor((containerWidth / 2) - (imgWidth / 2));

  $(this).css({"top" : top,"left" : left});
}

这可以使第一个图像居中，但之后不再有图像，我认为这是因为“Fade”过渡在过渡之前使用 beforeCSS 属性将 Top 和 Left 设置为 0。在不弄乱插件代码的情况下，是否可以使用适当的值覆盖此 beforeCSS ？

我可以手动设置 beforeCSS 属性，但我看不出这是如何工作的，因为每个图像的值都不同。

有什么建议吗？

Answer 1

您可以通过使用 div 而不是 img 元素轻松居中图像，设置背景图像属性...

<div id="slider">
    <div style="background-image: url(image1.jpg)"></div>
    <div style="background-image: url(image2.jpg)"></div>
    <div style="background-image: url(image3.jpg)"></div>
</div>

...并应用这种简单的风格

#slider { width: 800px; height: 600px; }
#slider div { width: 800px; height: 600px; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; }

希望有所帮助(至少对新人;-))