如何用JS达到 切换已旋转图片时同时修正旋转方向
下面代码
应该如何修改 使得图片切换时，还原旋转方向为默认方向（未旋转）
小弟刚学JS..各位大大帮帮忙了
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head> <style>.rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); -o-transform: rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);-o-transform: rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); -o-transform: rotate(2700deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}.spic a:hover{font-size:9px;}.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}.top { height:50px; width:100%; border-bottom:1px solid #ddd; position:absolute; top:0; left:0; text-align:right}.top img { margin:10px 15px 0 0}.left { width:100px; border-right:1px solid #ddd; position:absolute; top:51px; left:0; overflow-y:auto; bottom:0}.left img { margin:20px 0 0 10px;}.right { overflow:hidden; position:absolute; top:51px; left:101px; bottom:0; right:0; text-align:center; padding-top:20px}</style><body><SCRIPT language=JavaScript> function seeBig(_this) { document.images["imageshow"].src=_this.parentNode.getElementsByTagName("img")[0].src; document.images["imageshow"].height=_this.parentNode.getElementsByTagName("img")[0].height*8; document.images["imageshow"].width=_this.parentNode.getElementsByTagName("img")[0].width*8;}window.onload = function(){ //rotate image var param = { right: document.getElementById("rotRight"), left: document.getElementById("rotLeft"), img: document.getElementById("images1"), rot: 0 }; var fun = { right: function(){ param.rot +=1; param.img.className = "rot"+param.rot; if(param.rot === 4){ param.rot = 0; } return false; }, left: function(){ param.rot -=1; if(param.rot === -1){ param.rot = 3; } param.img.className = "rot"+param.rot; return false; }, }; param.right.onclick = function(){ fun.right(); }; param.left.onclick = function(){ fun.left(); };};</script><div class="top"> <input type="button" value="向左转" id="rotLeft" /><input type="button" value="向右转" id="rotRight" /></div> <div class="left"> <span class="spic"> <a href="###" onclick="seeBig(this)" style="cursor:pointer"> <img border="0" src="./images/a/a1.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span> <span class="spic"> <a href="###" onclick="seeBig(this)" style="cursor:pointer"> <img border="0" src="./images/a/a2.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span></div><div class="right" style='width: 1575px; height=1000px'> <div algin="center" id='hiddenPic' style='position:absolute; z-index:1; visibility: hidden; left:200px; top:90px; width:0px; height:0px;'> <img name='imagehide' id="images2" width="560" src='./images/test.jpg' border='0' onload="return imgzoom(this,600); style="cursor:pointer;" alt=""/></div> <div algin="center" id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:0; left:200px; top:90px; width:0px; height:0px; position: relative;' class="dragAble"> <img name='imageshow' id="images1" width="560" src='./images/test.jpg' border='2' onload="return imgzoom(this,600); style="cursor:pointer;" alt=""/></div> </div></body> </html>