Question

我想用Jquery制作旋转木马，而且img的宽度可变。

我知道如何使用 FIX 宽度计算多个img，但我不知道如何使用 VARIABLE 宽度进行计算以分配div（在本例中为sub_container）。

这是一个例子：

    <div id="container">
          <div id="sub_container" style="width:WIDTH FROM VARIABLE WIDTH OF IMAGES">          
             <img id="#number" width="200px" src="#">
             <img id="#number" width="240px" src="#">
             <img id="#number" width="150px" src="#">
             <img id="#number" width="500px" src="#">
          </div>
    </div>

记住：容器的宽度来自窗口/浏览器的宽度。

你能帮帮我吗？：/

非常感谢你！：（

Answer 1

你可以这样做：

$(function() {
   var width = 0;
   // Get all images in the sub container
   $("img","#sub_container").each(function () {
       // Add the width of each image
       width += $(this).width();
   });
   // Do whatever you want with the width
   $("#sub_container").width(width);
});

工作示例： http://jsfiddle.net/DZ9rF/

Answer 2

试试这个：

$.fn.sumWidths = function() {
    var sum = 0; 
    this.each(function() {
        sum += $(this).width();
    });
    return sum;
};

然后

$('#sub_container').width( $('#sub_container img').sumWidths() );

将imgs的宽度变量计算为div

2 个答案: