Question

我正在使用crossSlide jquery插件进行幻灯片放映。我的容器比其内部的图像大，因此图像的倾向位于左侧。有没有办法将它们放在容器的中心位置？

这是使用crosSlide的示例网站，因为我没有网站上传我的示例页面。

http://www.hashbangcode.com/blog/crossslide-jquery-plugin-test-348.html

Answer 1

使用jQuery确定元素的中心：

如果你知道父元素的innerWidth和元素的innerWidth，你可以确定你需要应用的左边位置来实现“中心”。

$("#crossslide img").each(function() {
  // let cl be (half parent width) - (half element width).
  cl = ($(this).parent().innerWidth() / 2) - ($(this).innerWidth() / 2);
  // we can set the left position to that value to achieve center
  $(this).css("left", cl);
});

您可能希望将执行此计算的函数与用于更改显示端口大小的处理程序相关联。

Answer 2

这是在将容器加载到ready函数后应用于容器的jQuery：

var xSlideWidth = $('#crossslide').width();
var xSlideHeight = $('#crossslide').height();

$('#crossslide').find('img').each(function(i,obj) {
  var objXdiff = (xSlideWidth - $(obj).width())/2;
  var objYdiff = (xSlideHeight - $(obj).height())/2;

  $(obj).css({ 'left':objXdiff+'px', 'top':objYdiff+'px' });
});

基本上遍历#crossslide中包含的每个图片，并计算top和left（相对于#crossslide绝对定位）的位置，根据它的小小程度

Answer 3

您可能需要更改插件才能执行此操作。我可以确定你没有看到你想要完成的任何事情。但是，这可以使用图像的绝对位置。然而，这似乎依赖于提供位置原点的容器 - 例如。图像始终位于容器的（0,0）处。

这个插件似乎没有办法让你以简单的方式改变它。但是，如果你查看"Ken Burns Effect"的选项，它似乎有办法做到这一点。是否可以配置一组能产生你想要的效果的选项我不知道，但这将是我的出发点。

Answer 4

我有同样的问题，所以我搜索了jquery.cross-slide.min.js文件中的“left：”并找到了这段代码：

.css({position:"absolute",visibility:"hidden",top:0,left:14,border:0})

我编辑了左侧位置，它对我有用。

使用jquery将图像附加到div中的中心

4 个答案: