2

我想在单击另一个图像时更改图像，但不仅要更改固定图像而是要利用 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 持开放态度。

有谁知道如何处理这个？

4

2 回答 2

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>
于 2015-04-23T15:13:47.890 回答
2

我认为您至少可以通过使用该setAttribute()方法来设置 srcset 属性。您也可以只替换整个图像标签：

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">';
}
于 2015-04-23T14:59:00.247 回答