どもです。
そもそも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>
<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;
}
height:xxxpx;
position:relative;
overflow:hidden;
text-align:center;
}
.image_box img{
display:inline-block;
height:xxxpx;
width:auto;
}
thumbnailは省略。画像縮小して横並びにすればおｋ。
で、肝心のjsですが…
function img_slide(n){
$(function(){
$('.image_box img').fadeOut(200);
setTimeout(function (){
$('#slide'+n).fadeIn(200);
},200)
});
}
$(function(){
$('.image_box img').fadeOut(200);
setTimeout(function (){
$('#slide'+n).fadeIn(200);
},200)
});
}
終わりです。
正直びびった。
これに矢印なんかを設定するとまたややこしくなりそうですが、最低限の動きだけならこれだけの記述でいけるっぽいです。
便利な時代になったもんだ。