基于jquery的图片的切换(以数字的形式)

具体的代码如下：
鼠标进入数字的时候添加了如下的CSS:

<style type="text/css"> 
.mouseOver 
{ 
cursor:hand; 
border:1px solid red; 
} 
</style> 

图片切换的JS代码如下：

复制代码代码如下:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var imgPaths = ["http://files.jb51.net/demoimg/201008/o_p1.jpg", 
"http://files.jb51.net/demoimg/201008/o_p3.jpg]; 
$(function () { 
$("#showImg").attr("src", imgPaths[0]); 
var top; 
var left; 
var width; 
var height; 
top = $("#showImg").offset().top; 
left = $("#showImg").offset().left; 
width = $("#showImg").width(); 
height = $("#showImg").height(); 
$("#popDiv").css({ position: "absolute", top: top + height - $("#popDiv").height(), left: left + width - $("#popDiv").width(), padding: "1px" }); 
$("#popDiv span").hover(function () { 
$(this).addClass("mouseOver"); 
}, 
function () { 
$(this).removeClass("mouseOver") 
} 
).click(function () { 
$("#showImg").attr("src", imgPaths[eval($(this).text())-1]); 
}); 
}); 
</script> 

HTML代码如下：

复制代码代码如下:

<div> 
<img id="showImg" alt="" height="400" width="300" src="" /> 
</div> 
<div id="popDiv" style="width:300px;height:20px;text-align:right"> 
<span>1</span> 
<span>2</span> 
</div> 

具体的运行的效果，大家可以自己复制上面的代码进行运行，如果想要更好的效果，可以自行的修改以上的代码。