说明：使用Jquery切换图片！实际上是当每次点击span的时候，将span的html作为第 几个 image 的下标来实现图片的切换效果。
准备：需要切换的图片
本事例原理：
页面放置一张图片，当点击span的时候，替换图片的下标，详细的请看本事例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>传值显示Div</title>
<!-- 引入Jquery -->
<script type="text/javascript" src="Script/jquery-1.3.2.min.js" language="javascript"></script>
<!-- 样式 -->
<style type="text/css">
.spanA
{
background-image:url('Image/sbg.png');
background-repeat:no-repeat;
cursor:pointer;
padding:5px;
font-size:10px;
}
</style>
</head>
<body>
<div style="position:relative;1024px;height:768px;background-image:url('Image/bg.png');background-repeat:no-repeat;margin:0 auto;">
<div style="margin-left:40px; font-size:26px;">
<br />
图片切换效果....
</div>
<br /><br /><br /><br /> <div></div><br /><div></div> <br /><div></div> <br />
<div>
<table border="1" style="border-color:#d4f6f6" cellspacing="0" cellpadding="20" width="340px" align="center">
<tr style="height:260px;">
<td>
<div id="example" style="300px;height:200px;">
<img id="myImg" style="border-color:Yellow" src="Image/1.jpg" alt="01" >
</div>
<span class="spanA" >1</span> <span class="spanA">2</span> <span class="spanA">3</span> <span class="spanA">4</span>
<span class="spanA">5</span> <span class="spanA">6</span> <span class="spanA">7</span> <span class="spanA">8</span>
</td>
</tr>
</table>
</div>
<!-- bottom -->
<div style="1024px;height:30px;bottom:10px; position:absolute;text-align:center; float:right;">
<span style="font-family:宋体;font-size:16px;">1999-2011 View photo © <span style="color:Red;font-size:20px;">彩</span><del style="color:Green;">色</del><span style="font-size:16px;color:black;">C</span>o<span style="font-size:14px;Color:blue;">d</span><span style="color:Black;font-size:14px;">e</span></span>
</div>
</div>
<script language="javascript" type="text/javascript">
/*
* 遍历span,获取span的文本值
* 让所有的div先隐藏，然后根据值让所选的div淡入
*/
$("span").each(function (event) {
$(this).mouseover(function (event) {
$(this).css({ cursor: 'pointer' });
$(this).css({ "background-image": "url('Image/sbg1.png')" });
}).mouseout(function (event) {
$(this).css({"background-image":"url('Image/sbg.png')"});
});
var num1 = $(this).html();
$(this).bind("click", function (event) {
$("img").fadeOut("slow", function (event) {
$("#myImg").attr("src", "Image/" + num1 + ".jpg").show(500);
});
$("#myImg").fadeIn("fast");
});
});
</script>
</body>
</html>
效果：
1、
2、
