Question

我想在另一个图像上更改图像，但不仅要更改固定图像，还要使用srcset的优点，因此浏览器会选择适合当前主图像大小的图像（响应式布局）。

这就是我现在正在使用的，vanilla：

<div id="item-detail-img-main">
  <img src="/_img/items/400/img.jpg" srcset="/_img/items/400/img.jpg 400w, /_img/items/600/img.jpg 600w" alt="" width="100%" id="item-detail-img-main-img">
</div>
<script type="text/javascript">
function chimg (img) {
  window.document.images["item-detail-img-main-img"].src = img;
}
</script>
<ul id="item-detail-img-thumbs">
  <li><img src="/_img/items/200/img.jpg" onclick="chimg('/_img/items/400/img.jpg')"></li>
  <li><img src="/_img/items/200/img2.jpg" onclick="chimg('/_img/items/400/img2.jpg')"></li>
</ul>

我在这里对jquery持开放态度。

任何人都知道如何处理这个问题？

Answer 1

我认为你可以设置srcset属性，至少可以使用setAttribute()方法。您也可以只替换整个图像标记：

function(img,img2,img3){
    document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+img2+' 400w, '+img3+' 600w" alt="" width="100%" id="item-detail-img-main-img">';
}

Answer 2

jQuery选项看起来像这样：

https://jsfiddle.net/axcnotx7/

D(i,c) = min { D(i-1, c/y) + y^2 | 1 <= y <= c }

单击更改图像到另一个图像，但使用srcset功能（jquery可选）

2 个答案: