jq实现旋转图片

html

第一种方法

var current = 0;
$(".rotate").on("click",function(){
if(current==0){
$(".zzc-img img").css("transform","rotate(90deg)");
current=1;
}else if(current==1){
$(".zzc-img img").css("transform","rotate(180deg)");
current=2;
}else if(current==2){
$(".zzc-img img").css("transform","rotate(270deg)");
current=3;
}else if(current==3){
$(".zzc-img img").css("transform","rotate(360deg)");
current=0;
}
})

switch方法

var current = 0;
$(".rotate").on("click",function(){
switch(current)
{
case 0:
$(".zzc-img img").css("transform","rotate(90deg)");
break;
case 1:
$(".zzc-img img").css("transform","rotate(180deg)");
break;
case 2:
$(".zzc-img img").css("transform","rotate(270deg)");
break;
case 3:
$(".zzc-img img").css("transform","rotate(360deg)");
current=-1;
break;
}
current++
})

第三种最简单的方法

var current = 0;
$(".rotate").on("click",function(){
current = (current+90)%360;
$(".zzc-img img").css("transform","rotate("+current+"deg)");
})