Question

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

我添加了一个'Before'回调，我在加载前设置对象的Top和Left，使用以下代码：

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

这可以使第一个图像居中，但之后没有图像，我认为这是因为“淡入淡出”转换使用beforeCSS属性在转换之前将Top和Left设置为0。如果不搞乱插件代码，是否可以在具有适当值的CSS之前覆盖它？

我可以手动设置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%; }

希望有所帮助（至少是新人;-)）

Answer 2

您正在请求的示例，来自cycle-plugin的作者。 http://jquery.malsup.com/cycle/test/nov20.html他使用了与你正在做的相似的技巧，但是设置了margin-left和margin-top属性而不是top和left属性......这对你有什么影响？

jQuery循环插件，以div为中心的图像

2 个答案: