日期:2014-05-16  浏览次数:20381 次

如何用JS达到 切换已旋转图片时同时修正旋转方向
下面代码
应该如何修改 使得图片切换时,还原旋转方向为默认方向(未旋转)

小弟刚学JS..各位大大帮帮忙了

HTML code
<!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 cl