【Jquery】シンプルな画像切り替えJSサンプル
すごい簡単な画像切り替えのJS
ECサイトによくあるあれっすあれ。
前回に引き続き、ID割り振りとかめんどくさいのでエセ汎用ぽく作ってます。
ビバ!thisとかprevとかnextとかchildrenとか!
HTML
<div class="change"> <div class="main"><a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a></div> <div class="thums"> <a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a> <a href="img/sample2.jpg" target="_blank"><img src="img/sample2.jpg"></a> <a href="img/sample3.jpg" target="_blank"><img src="img/sample3.jpg"></a> </div> </div>
SASS
.change { width:720px; overflow:hidden; .main { float:left; width:610px; } .thums { width:95px; float:right; text-align:left; img { margin-bottom:10px; } span { display:block; margin-bottom:5px; } } }
CSS
.change { width:720px; overflow:hidden; } .change .main { float:left; width:610px; } .change .thums { width:95px; float:right; text-align:left; } .change .thums img { margin-bottom:10px; } .change .thums span { display:block; margin-bottom:5px; }
JS
<script type="text/javascript" charset="utf-8"> $(function(){ $(".change a").hover( function () { var ImgSrc = $(this).attr("href"); $(this).parent().prev().children("a").attr({href:ImgSrc}).children("img").attr({src:ImgSrc}); return false; }, function () { } ); }); </script>