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

少なくとも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 に答える