居中子元素,相应地调整父母

时间:2011-10-27 17:37:31

标签: jquery css slider jquery-animate center

我有一个必要的图像滑块。我有一个图像列表:

 <div class="container">
      <img src=""/>
      <img src=""/>
      <img src=""/>
      <img src=""/ class="middle">
      <img src=""/>
      <img src=""/>
      <img src=""/>
      <img src=""/>
 </div>

左 右

目标是:当用户向右或向左点击时,我会将第一个或最后一个图像移动到字符串的另一端,将class =“middle”移动到下一个图像(取决于按下哪个按钮) ),然后动画,以便.middle被移回屏幕的中心。问题是,我不知道是否有可能(使用jquery)将子元素居中,然后相应地调整所有其他子节点和父节点。思考?谢谢!

1 个答案:

答案 0 :(得分:1)

尝试这样的事情:

var $imgmiddle = $('img.middle');
var imgwidth = $imgmiddle.width();
var docwidth = $(document).width();
var newleft = docwidth/2 - imgwidth/2;
var imgleft = $imgmiddle.position().left;  // position inside container
$('div.container').offset({left: (newleft-imgleft)});