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

发布于 2024-07-25 20:19:09 字数 802 浏览 10 评论 0原文

我正在寻找使用 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 属性，但我看不出这是如何工作的，因为每个图像的值都不同。

有什么建议么？

原文

I'm looking to use the JQuery cycle plugin to cycle through a set of images. All of the images are different sizes and I'd like them to all be centered inside the container "slideshow" DIV and use the "Fade" transition, rather than the default top left.

I have added a 'Before' callback, where I set the Top and Left of the object before loading, using the following code:

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

This works to centre the first image but no images after that, I think this is because the "Fade" transition uses the beforeCSS property to set Top and Left to 0 before transitioning. Without messing about with the plugin code is it possible to override this beforeCSS with the appropriate values?

I could manually set the beforeCSS property but I can't see how this would work as the value would be different for each image.

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹉夏雨初晴づ 2024-08-01 20:19:09

您可以通过使用 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%; }

希望有帮助（至少对新手;-)）

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

回复收藏 0 原文