サムネイルの入れ替えについて

Question

========================================

image1(メイン画像)

=========================================
|image2|image3|image4|image5|　（サムネイル画像）

上記のイメージをスライダーだと思ってください。

サムネイルのimage2をクリックするとメイン画像にimage2が表示され、サムネイルのimage2がimage1のサムネイルに変わる、その後サムネイルのimage3をクリックするとメイン画像がimage3になり、サムネイルimage3がimage2になるようにしたいです。
現在のソースは下記の通りです。

実現できるものなのでしょうか？
ご回答いただける方、どうぞご教授くださいませ。
よろしくお願いいたします。

<table>
<tr>
<td class="slide"><img src="images/01.jpg" /><em>メイン画像</em></td>
</tr>
<tr>
<td>
<ul>
<li><a href="images/02.jpg" title="画像02"><img src="images/02.jpg" /></a></li>
<li><a href="images/03.jpg" title="画像03"><img src="images/03.jpg" /></a></li>
<li><a href="images/04.jpg" title="画像04"><img src="images/04.jpg" /></a></li>
<li><a href="images/05.jpg" title="画像05"><img src="images/05.jpg" /></a></li>  
</ul></td>
</tr>
</table>

<script>
$(document).ready(function(){
	$("td > ul > li").hover(function(){ 
		$(this).fadeTo(200,0.5);
	},function() {
		$(this).fadeTo(200,1);
	});
	$("td > ul > li > a").click(function(){
		var src = $(this).attr("href"); 
		var title = $(this).attr("title");
		$(".slide").fadeOut("slow",function() {
			$(this).find("img").attr("src",src);
			$(this).find("em").html(title);
			$(this).fadeIn();
		});
		return false;
	});	
});
</script>

Answer 1

プラグインを使っても良いならbxsliderあたりで実装できます。
こちらの「サムネイルを表示する」を参考になさっては？

Comments

[退会済みユーザー]

あとJavaとJavascriptは全くの別物です。

[退会済みユーザー]

ありがとうございます。