<div id="content"> <div id="featured_img"> <img id="img" src="https://www.imamura.biz/blog/wp-content/uploads/image01.png"> </div> <div id="thumb_img" class="cf"> <img class="active" src="https://www.imamura.biz/blog/wp-content/uploads/image01_thumb.png" onclick="changeimg('https://www.imamura.biz/blog/wp-content/uploads/image01.png',this);"> <img src="https://www.imamura.biz/blog/wp-content/uploads/image02_thumb.png" onclick="changeimg('https://www.imamura.biz/blog/wp-content/uploads/image02.png',this);"> <img src="https://www.imamura.biz/blog/wp-content/uploads/image03_thumb.png" onclick="changeimg('https://www.imamura.biz/blog/wp-content/uploads/image03.png',this);"> </div> </div>
クリック(タップ)した際に「今その画像を表示しているよ」ということをわかりやすくするため、class名に「active」を付与してCSSで枠線を付けています。
「active」の処理がいらないな、という場合は、該当する箇所を削除してしまえばいいですね。(その場合は、3~8行目をごっそり削除できます)
function changeimg(url,e) { document.getElementById("img").src = url; let nodes = document.getElementById("thumb_img"); let img_child = nodes.children; //id名「thumb_img」配下の子要素を取得 for (i = 0; i < img_child.length; i++) { //要素の数ループさせる img_child[i].classList.remove('active') //要素に付与されているすべてのclass名「active」を削除する } e.classList.add('active'); //クリック(タップ)した要素にclass名「active」を付与する }
.cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } #content { max-width: 650px; margin: 3rem auto; text-align: center; } #featured_img img, #thumb_img img { max-width: 100%; } #thumb_img { margin-top:2%; img { float:left; max-width: 32%; width: 32%; cursor: pointer; margin-right:2%; border:2px solid #eee; box-sizing:border-box; &.active{ border:2px solid #cac6b8; } &:last-child{ margin-right:0; } } }
最近では、閲覧する端末(retinaなど)によって、読み込む画像を変更する「srcset」属性が指定されている場合も多くなってきました。
もし今回ご紹介したコードを使用して画像を切り替えたい場合は、src要素のURLだけ切り替えても「画像が変わらないじゃない!」ということがあります。
その場合は、src,srcsetそれぞれの属性に指定されている画像のURLを変更してあげればOKです。
function changeimg(url,e) { document.getElementById("img").src = url; document.getElementById("img").srcset = url; //途中省略 }
私はこんな感じで実装しましたが、他にももっといい方法があるかもしれませんね。もしご存知でしたら、ぜひともご教示いただけますとうれしいです。
このページを共有する