Javascript 使用带有2个按钮的jQuery旋转图像

我一直尝试在点击右键时将图像旋转90度，在点击左键时将图像旋转-90度。我的密码在这里。 我试图创建一个计数器设置为0的循环，并在if和else语句中循环。但我没有让它发挥作用：

HTML:

jQuery：

---

基本上，我试图创建一种计数器，当点击左键时，它会增加1，并添加各种CSS元素，这样它就可以向左旋转，减少-1，这样它就可以向右旋转+90，它似乎没有任何效果。谢谢

如果我理解的话，您需要设置一个变量来跟踪度转弯，如果向右加90，如果向左减90

$document.readyfunction{ var-deg=0； $.button.onclick，函数{ 如果$this.isleft{ 度=度-90； }否则{ 度=度+90； } $rotate.css{ -webkit变换：旋转+度+度， -moz变换：旋转+度+度， 变换：旋转+度+度 }; }; }; 左边

---

right您的想法是正确的，在向左旋转时设置一个计数器，反之亦然，但是您给出的示例中存在一些语法错误。 $rotate.css{ -webkit变换：旋转-90度， -moz变换：旋转-90度， 变换：旋转-90度 出纳员+=1； };

更高+=1；是一个语句，它不应该出现在对象内部。对象是键、值对，用冒号分隔，用逗号连接

}否则，如果$right.click{

$right.click是一个接受事件处理程序函数参数的方法，用于绑定元素上的click事件处理程序，它返回jQuery对象

$rotate.css{ } 这不会清除元素上的css

我在这里写了一个简单的例子：

---

有两个按钮控制块向左或向右旋转。试试这个，点是360度旋转，所以你需要知道当前旋转了多少，应该旋转多远

$document.readyfunction{ $left.clickfunction{ 旋转酸-90 }; $right.clickfunction{ 旋转酸盐，90； }; }; 函数旋转角度 { var rv=$who.propdata rot？$who.propdata rot:0； rv=rv+1； n=rv*角度； ifMath.absn>=360{n=0；rv=0；} $who.css{ -webkit变换：旋转+n+度， -moz变换：旋转+n+度， 变换：旋转+n+度 }; $WHO.propdata rot，rv； } 左边

---

rightYou脚本完全搞乱了。非常感谢。顺便说一下，在$rotate.css{之后，您的转换位正确了吗？它基本上会将它添加到css样式中吗？如果我有rotate{}在我的空css中，它会向其中添加那些转换位吗？谢谢！@Brooku你很受欢迎：jQuery通过$.css将样式作为内联样式添加到元素中。因此，如果你在旋转后检查页面，你会看到它在旋转元素本身上有style=transform:rotate。

<button id="left" class="button">left</button>
<img src="images/cartoon.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>

#draaien {

}

$(document).ready(function(){

 var counter = 0;
 $("#left").click(function(){
 if (counter == 0){
 $("#rotate").css({
    "-webkit-transform": "rotate(-90deg)",
    "-moz-transform": "rotate(-90deg)",
    "transform": "rotate(-90deg)"  
    teller +=1;
 });
 counter=0;

 $("#rotate").css({
 }

}else if($("#right").click()){
$("#rotate").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "transform": "rotate(90deg)"

}
});
});
});