Question

我正在使用幻灯片脚本，需要每个图片的尺寸才能正常工作。客户端也需要添加50多个图像。

我是否可以使用一个脚本来查找ID为“scroller”的无序列表中所有图像的宽度，然后设置宽度就像在图像标签中设置一样？

如果有人可以帮我写，并且可能解释每个部分的作用，我将非常感激。

如果您正在寻找代码，请点击此处。

在JQuery代码之前。

<ul id="scroller">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>

在JQuery代码之后。

<ul id="scroller">
<li><img src="image.jpg" width="100"></li>
<li><img src="image.jpg" width="350"></li>
<li><img src="image.jpg" width="70"></li>
<li><img src="image.jpg" wudth="250"></li>
</ul>

图像的宽度不同，但高度相同。

Answer 1

是的，你可以。它非常直观。

$('image selector').width(); //to access width
$('image selector').width(N); //to set width to Npx.

为了遍历所有这些内容，您将使用.each()。

$('#scroller img').each(function() {
    //Do stuff width each image. $(this).
}

您可能想要知道可以抓取现有宽度并设置它，但仅在元素完全加载后才能设置。这可能会在旧版浏览器上引起一些跳跃，因此隐藏图像，抓住现有尺寸，进行转换，然后同时将它们全部淡入或者看起来很像这样的东西是值得的。谢谢@Whetstone

$(function() {

    $('#scroller img').each(function() {
        $(this).attr('width', $(this).width());
    });

});

Answer 2

$('#scroller img').each(function(){
var t=$(this);
    t.load(function(){
        t.attr('width', t.attr('width'));
    });
});

.ee滚动浏览#scroller ul中的所有图片。

jQuery只能在完全加载后获得图像的宽度，因此.load。

其余的非常简单。有关详细信息，请使用jQuery API文档。

Answer 3

$('#scroller').find('img').each(function() {
   // $(this).width()
   // Implement your stuff
});

我可以使用Jquery查找然后设置图像的宽度吗？

3 个答案: