jQuery图片顺时针(逆时针)旋转

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

<div class="aaaa">

<p>

    <a id="rotLeft" class="left" href="javascript:void(0);">&lt;&lt;向左转</a>

        <a id="rotRight" class="right" href="javascript:void(0);">向右转&gt;&gt;</a>

    </p>

<div id="imgBox" class="image_box">

<img id="rotImg" src="images/aaaa.jpg" />

</div>

</div>

书写css代码。

<style>

*{ margin:0; padding:0; list-style:none;}

.aaaa{width:500px; margin:0 auto; font-size:12px; overflow:hidden}

.aaaa p{ overflow:hidden;}

.aaaa p a{ margin:5px 0; display:inline-block; color:#333; text-decoration:none; margin-right:10px;}

.aaaa .left{ float:left;}

.aaaa .right{ float:right;}

.aaaa .image_box{text-align:center;}

</style>

书写并添加js代码。

<script src="js/jquery-1.2.6.pack.js"></script>

<script src="js/jquery.rotate.js"></script>

<script>

$(function(){

var rot = 0;

$("#rotRight").click(function(){

if(rot === 360){

rot = 0;

}

rot += 90;

$("#rotImg").rotate(90);

});

$("#rotLeft").click(function(){

if(rot === -360){

rot = 0;

}

rot -= 90;

$("#rotImg").rotate(-90);

});   

});

</script>

代码整体结构。

查看效果。