具体的代码如下： 鼠标进入数字的时候添加了如下的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> 具体的运行的效果，大家可以自己复制上面的代码进行运行，如果想要更好的效果，可以自行的修改以上的代码。

　　推荐阅读

　　图片拼图记忆力测试游戏，网页+JS版

记忆力测试游戏，网页+JS版，规则：图被分割成15块。 　　每次随机给出一块，在问号区域中找到它的位置并单击该位置。每选对一个区域得一分，得15分才算获胜，每次游戏只有15次机会。 记忆测试 .20pt{font>>>详细阅读

本文标题：基于jquery的图片的切换(以数字的形式)

地址：http://www.17bianji.com/kaifa2/JS/24939.html

 1/2    1