2

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

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

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。在不弄乱插件代码的情况下，是否可以用适当的值覆盖这个 beforeCSS？

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

有什么建议么？

4

2 回答 2

2

You can easily center images by using div rather than img elements, setting the background-image property...

<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>

...and applying this simple style

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

Hope that helps (at least the newcomers ;-) )

于 2010-11-11T18:35:48.203 回答
1

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

于 2009-06-28T14:22:36.540 回答