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

　　<style type="text/css">

　　.mouseOver

　　{

　　cursor:hand;

　　border:1px solid red;

　　}

　　</style>

　　<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

　　<script type="text/javascript">

　　var imgPaths = ["http://files.glzy8.com/demoimg/201008/o_p1.jpg",

　　"http://files.glzy8.com/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>

　　<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>