ど素人から毛を生やす。<延>

サムネクリックでメイン画像が切り替わるjs

Web > javascript 2014年3月18日(最終更新:3年前)

このページは2014.3.18に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
そもそもGCが行方不明なことに気づいた餅。です。

…今の子どもにGCって通用すんのかな…(´・ω・`)

さて、今回はjsについてなのですが、

並んだサムネイルをクリックすると、メイン画像エリアの画像がクリックしたものにフェードで切り替わる

という、よくあるシステムを導入することになりまして。
色々弄ってたら、ものすごいシンプルな方法で実現可能だとわかったのでめもめも。

HTMLはこんな感じ。

<div class="image_box">
<img src="xxxx.png" id="slide1">
<img src="yyyy.png" id="slide2">
<img src="zzzz.png" id="slide3">
</div><div class="thumbnail">
<img src="xxxx.png" onclick="slide(1)">
<img src="yyyy.png" onclick="slide(2)">
<img src="zzzz.png" onclick="slide(3)">
</div>

CSSはこんな。

.image_box{
height:xxxpx;
position:relative;
overflow:hidden;
text-align:center;
}
.image_box  img{
display:inline-block;
height:xxxpx;
width:auto;
}

thumbnailは省略。画像縮小して横並びにすればおk。

で、肝心のjsですが…

function img_slide(n){
$(function(){
$('.image_box img').fadeOut(200);
setTimeout(function (){
$('#slide'+n).fadeIn(200);
},200)
});
}

終わりです。
正直びびった。

これに矢印なんかを設定するとまたややこしくなりそうですが、最低限の動きだけならこれだけの記述でいけるっぽいです。

便利な時代になったもんだ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)