Question

我想创建一个包含图像的水平滚动图库。

即

<ul class='fluid_ul'>
<li id='fluid_li'>
<img>
</li>
<li... etc etc
</ul>

img是百分比高度/自动宽度。 li也有间距边距。

由于这个宽度，我需要在调整窗口大小/加载窗口时更改UL。

我发现这个previous post看起来很有前途，但在这种情况下根本无法让它工作。

当图像调整大小时，如何生成UL宽度的任何想法/帮助都会令人惊叹！

Answer 1

确定，

html 对您的示例代码进行细微更正

<ul id='fluid_ul'>
    <li><img src=".." /></li>
    <li><img src="..." /></li>
</ul>

<强> jquery的

$(window).load(function(){ // once the page has loaded (including images)
    var totalWidth = 0; // a variable to hold the total width of the li elements
    $('#fluid_ul').children().each(function(){ // for each li
        totalWidth += $(this).outerWidth(); // add its width to the total
    }).end().css({width:totalWidth}); // finally revert selection to ul and apply total
});

将<li>宽度添加到父<ul> </ul> </li>

1 个答案: