クリックすると画像がかわる 【jQuery】

◆プラグインを使わないで、CSSとjQueryのみでクリックすると切り替わる

※コピペ可

▼html側

<div id="ani_box">
<ul>
 <li><a href="#1"><img src="img_01.png" alt="AAA" width="200" height="150" /></a></li>
 <li><a href="#2"><img src="img_02.png" alt="AAA" width="200" height="150" /></a></li>
 <li><a href="#3"><img src="img_03.png" alt="AAA" width="200" height="150" /></a></li>
</ul>
</div>

※リンクを付けたい場合は"#1 #2 #3"にリンクをつける。切り替えるだけならいらない削除

▼CSS側

#ani_box{
height:200px;
}

#ani_box ul{
list-style:none;
position:relative;
}

#ani_box ul li{
position:absolute;
top:0;
left:0;
}

ここで重ねてる。


▼js側

$("#ani_box ul li").click(function(){
$("#ani_box li:last").fadeOut("fast",function(){$(this).fadeIn("fast").insertBefore("#ani_box li:first")});
});

これ↑をつかって、 透明にして ずらして 拡大してフェードアウトさせる