Question

我想创建一个包含在<ul>：

中的图片幻灯片

<ul>
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li>
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li>
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li>
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li>
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li>
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li>
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li>
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li>
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li>
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li>
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li>
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li>
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li>
</ul>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    li {
        display: none;
        list-style-type:none;
        margin:0;
        padding:0;
        position: absolute;
    }
</style>

你可以看到html标记和CSS非常简单。我遇到的问题是，尽管所有图像都具有相同的尺寸，但事先并不知道尺寸。因此，我无法在<ul>上设置固定高度，但我必须 - 因为相对定位元素内的绝对定位元素意味着容器的高度为零，图像开始出现在其下方的内容中。 / p>

我正在使用jQuery，所以请引导我走向基于CSS和/或jQuery的解决方案。 请注意我已经尝试过了：

$("ul").height(
    $("ul li:eq(0)").outerheight()
)

但是，在文档就绪时，图像未加载，因此高度未知。我也尝试添加延迟/等待$("ul li:eq(0)").outerheight() > 0，但这会给IE带来问题。当IE部分下载图像时，IE通常会返回大于零的值，但这个值通常小于实际图像高度。如果您需要任何澄清，请与我们联系。

Answer 1

例如：

var width, height;

$('ul img').load( function () {
    width  = this.width;
    height = this.height;
});

借用这个问题的答案Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 2

我认为从相反的角度做这件事在技术上会更好。删除display：none;从你的CSS，然后在页面加载时获得框的高度（这样，没有javascript的人仍然可以看到图像）。然后，通过javascript将li的显示属性设置为none。

你获得了高度和相同的功能！

Answer 3

通过这样做？

$("ul").css({
   height: $("ul li:eq(0)").find("img").outerheight()
});

CSS Relative-Absolute定位导致容器没有高度

3 个答案: