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

Question

我想在点击另一个图片时更改图片，但不只是想更改固定图片而是利用 srcset 的优势，因此浏览器会根据当前主图大小选择正确的图片（响应式布局).

这就是我现在正在使用的香草：

<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/

<div>
  <img id="main" width="100%" id="item-detail-img-main-img">
</div>
<ul id="thumbs">
  <li><img src="https://icons.iconarchive.com/icons/fi3ur/fruitsalad/256/banana-icon.png"></li>
  <li><img src="https://icons.iconarchive.com/icons/bingxueling/fruit-vegetables/256/apple-red-icon.png"></li>
</ul>
<script type="text/javascript">
    var main = $('img#main');
    $('#thumbs img').click(function(e) {
        var imageSrc = e.currentTarget.src;
        // You need to determine your own srcset paths here
        var srcSet = imageSrc + ' 400w, ' + imageSrc + ' 600w';
        main.attr('src', imageSrc);
        main.attr('srcset', srcSet);
    });
</script>

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

Change an image on click onto another image, but use the srcset functionality (jquery optional)

html

javascript

jquery

srcset