利用js实现按钮控制图片旋转

 function xuanzhuan() {
            
            var len = 90;
            var lens = $("#DataList1_ctl00_Image1").attr("lens");
            lens=parseInt(lens)
            var n = 90 * lens;
            $("#DataList1_ctl00_Image1").css("transform", "rotate(" + n + "deg)");
            $("#DataList1_ctl00_Image1").css("-webkit-transform", "rotate(" + n + "deg)");
            $("#DataList1_ctl00_Image1").css("-o-transform", "rotate(" + n + "deg)");
            $("#DataList1_ctl00_Image1").css(" -moz-transform", "rotate(" + n + "deg)");

            if (lens == 5) {
                lens = 1;
            } else {
                lens++;
            }
          
            $("#DataList1_ctl00_Image1").attr("lens", lens);
            
          
            }

这里的图片id名字是从网页F12获取的名字，之前直接用Image1会提示找不到，弄了半天 QAQ。代码中的lens是为了控制循环旋转，不然只能旋转一次，核心旋转代码： $("#ID名字").css("transform", "rotate(" + 角度 + "deg)");

实现效果：

 

点击旋转按钮

 

 

 

可以循环旋转。