比如说点的是图片的左边，还是右边，上边还是下边？点击图片左右显示上下张，我怎么知道？
这样就可以做出像QQ空间那样，打开上一个图片和下一个图片。
实现方法：
使用window.event.offsetX 与 图片的 clientWidth
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="imagetoolbar" content="no"> <title>JS数组实现点击图片左右显示上下张 - 中国asp之家</title> <style> <!-- body{ text-align:center; margin:20px 0px 0px 0px; } table{ border:0px; } .sp{ width:520px; height:400px; border:2px solid #FFCC00; text-align:center; line-height:400px; } .sn{ height:30px; text-align:center; } img{ border:0px; cursor:pointer; } --> </style> <script language="javascript"> <!-- var photo=new Array(4); var currid=0; var photopre=new Image(); photopre.src="/article/UploadPic/200810/4/2008104105528833.ani"; var photonext=new Image(); photonext.src="/article/UploadPic/200810/4/2008104105531790.ani"; photo[0]="/article/UploadPic/200810/4/2008104105531870.jpg" // 预读图片 var photo0=new Image(); photo[1]="/article/UploadPic/200810/4/2008104105532280.jpg" // 预读图片 var photo1=new Image(); photo1.src="/article/UploadPic/200810/4/2008104105532280.jpg"; photo[2]="/article/UploadPic/200810/4/2008104105533129.jpg" // 预读图片 var photo2=new Image(); photo2.src="/article/UploadPic/200810/4/2008104105533129.jpg"; photo[3]="/article/UploadPic/200810/4/2008104105533808.jpg" // 预读图片 var photo3=new Image(); photo3.src="/article/UploadPic/200810/4/2008104105533808.jpg"; //点击事件 function showphoto(o){ if(window.event.offsetX>=o.clientWidth/2){ currid=currid+1; }else{ currid=currid-1; } if(currid>=4){ currid=0; }else if(currid<0){ currid=3; } inphoto.src=photo[currid]; } //改变鼠标样式 function changestyle(o){ if(window.event.offsetX>=o.clientWidth/2){ o.style.cursor="url("+"/article/UploadPic/200810/4/2008104105531790.ani"+")"; o.alt="点击显示下一张"; }else{ o.style.cursor="url("+"/article/UploadPic/200810/4/2008104105528833.ani"+")"; o.alt="点击显示上一张"; } } --> </script> </head> <body> <table> <tr> <td class="sp"><img name="inphoto" id="inphoto" src="/article/UploadPic/200810/4/2008104105531870.jpg" onmousemove="changestyle(this)" onclick="showphoto(this)"></td> </tr> <tr> <td class="sn">点击图片左右显示上下张</td> </tr> </table> </body> </html> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...