利用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)");

    <input class="xjbutton1" type="button" value="旋转" onclick="xuanzhuan();" style="width: 60px" />

<div id="page1" runat="server">
                            <asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList1_ItemDataBound">
                                <ItemTemplate>
                                    <asp:Label ID="LabTitle" runat="server" Text='<%#Eval("Title")%>' Visible="false"></asp:Label>
                                    <asp:Image ID="Image1" lens="1" runat="server" ImageUrl='<%#Eval("Url")%>' Width="785px" ImageAlign="absmiddle" />
                                    <iframe id="ifr_c" frameborder="0" style="display:none;width:785px; height:600px;"></iframe>
                                  
                                   
                                   
                                   
                                </ItemTemplate>
                            </asp:DataList>
                        </div>

实现效果：

 

点击旋转按钮

 

 

 

可以循环旋转。