jqueryで簡易クロスフェード

サムネイルをクリックして画像をクロスフェードで切り替えるスクリプトを捜していたが、どれも設定が多くて面倒だったので簡単にできるものを自作。初めてjsで作ったかも。作ると言うほどの出来ではないが...。

javascript部

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function() {  $(".thumbs a").click(function() {   var curSrc = $(".viewarea img").attr("src");   $(".viewarea").css("background", "url("+curSrc+") no-repeat top center");     var newSrc = $(this).attr("href");   var newAlt = $(this).attr("title");   $(".viewarea img").attr({ src: newSrc, alt: newAlt }).css("display", "none").fadeIn(500);   return false;  }); }); </script>

html部

?

1 2 3 4 5

<div class="viewarea"><img alt="caption1" src="image01.jpg"></div> <ul class="thumbs"> <li><a href="image01.jpg" title="caption1"><img src="thumbnail01.jpg"></a></li> <li><a href="image02.jpg" title="caption2"><img src="thumbnail02.jpg"></a></li> </ul>

動作サンプルはこちら。