1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="aaaa"><p> <a id="rotLeft" class="left" href="javascript:void(0);"><<向左转</a> <a id="rotRight" class="right" href="javascript:void(0);">向右转>></a> </p><div id="imgBox" class="image_box"><img id="rotImg" src="images/aaaa.jpg" /></div></div>
4、书写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>
5、书写并添加js代码。<script src="js/jquery-1.2.6.pack.js"></script><s艘早祓胂cript 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>
6、代码整体结构。
7、查看效果。
