javascript - 单击另一个图像时更改图像，但使用 srcset 功能(jquery 可选)

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">';
}