jquery - 如何在网站内容后面创建居中的图像幻灯片

Question

我正在尝试通过以下方式在我的网站内容后面创建幻灯片:

Mockup image.

我有这个 HTML:

<div id="wrapper">
  <div id="slideshow">
    <img src="images/image1.jpg" alt="" />
    <img src="images/image2.jpg" alt="" />
    <img src="images/image3.jpg" alt="" />
  </div>
  <div id="content">This is content</div>
</div>

还有这个 CSS:

#wrapper{
    width:100%;
    background: url(images/pattern.jpg) repeat left top;
}

#slideshow{
    position: relative;
}

#slideshow img{
    position: relative;
    left:0;
    right: 0;
    top:0;
}

#content{
   width: 1000px; /* just for testing */
   position: absolute;
   z-index: 10;
}

我正在使用 jQuery 循环插件 实现基本的淡入淡出效果

使用上面的方法，我的wrapper div 与我的slideshow div 具有相同的高度。如何让 wrapper 延伸到浏览器窗口的底部，同时允许 slideshow 从其中的图像获取高度？我还想将 slideshow div 水平居中。

谢谢。

更新:已解决。
感谢@Alvaro

这是最终代码 http://jsfiddle.net/r6JYr/5/

Answer 1

要使图像水平居中，您可以设置:

margin:auto;

调整包装器以占据整个高度:

height:100%;

JSFiddle