前兩天用Js實作在這個功能，現在在學習JQuery 也做了一下這個功能，多多練習，一切都會變的簡單；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Css/Commom.css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var data = { "Images/01_small.jpg": ["Images/01.jpg", "圖檔1"], "Images/02_small.jpg": ["Images/02.jpg", "圖檔2"], "Images/03_small.jpg": ["Images/03.jpg", "圖檔3"] }; //Key:Value;
$(function () {
$.each(data, function (key, value) {
//初始化最後一個div為隐蔽
$("div").last().hide();
//ket是小圖的位址；
var smallPath = $("<img src='" + key + "'/>").css("margin", "5px").css("padding", "2px").css("border", "1px solid #000");
//設定大圖位址和名稱；
bigImgPath = smallPath.attr("bigMapPath", value[0]);
bigImgName = smallPath.attr("bigMapName", value[1]);
//給小圖添加事件
smallPath.mouseover(function () {
//最後一個div淡入效果
$("div").last().fadeIn("slow");
//擷取大圖位址
$("#show").attr("src", $(this).attr("bigMapPath"));
//擷取大圖名稱并設定樣式
$("#imgTitle").text($(this).attr("bigMapName")).css("background", "#ebf1de").css("padding", "10px").css("margin-bottom", "10px");
});
smallPath.mouseout(function () {
//指定最後一個div；
$("div").last().fadeOut("slow");
//.first方法，指第第一個DIV添加小圖；（過濾器）
$("div").first().append(smallPath);
});
});
</script>
</head>
<body>
<div class="column">
</div>
<p id="imgTitle">
</p>
<img id="show" src="" alt="" />
</body>
</ html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)