$(function(){
var nextAngle = 0;
var previousAngle = 0;
function getNextAngle(elem) {
nextAngle += 90;
return nextAngle;
}
function getPreviousAngle(elem) {
previousAngle -= 90;
return previousAngle;
}
$(".rotRight").click(function(){
$(this).parent().parent().parent().parent().find(".img").rotate(getNextAngle());
});
$(".rotLeft").click(function(){
$(this).parent().parent().parent().parent().find(".img").rotate(getPreviousAngle());
});
});
<div class="box">
<div class="imgContainer">
<img class="img" src="img/teste.jpg" alt="">
</div>
<div class="bottomActions">
<div class="action">
<a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla nunc, suscipit nec pellentesque sed, consequat ut ligula. Nam nec ullamcorper lacus. Duis cursus nunc nec interdum sollicitudin. Ut eu mollis elit, vel placerat purus. Phasellus viverra adipiscing luctus. Aenean quis ultricies ipsum. Fusce viverra sollicitudin dolor, nec cursus tellus mattis feugiat.">
<img src="img/chat.png" alt=""></a>
</div>
<div class="actionHeart">
<img class="img-swap" src="img/heart_grey_on.png" alt="">
<img class="img-swap" src="img/heart_grey_off.png" alt="" style="display:none">
</div>
<div class="actionWarning">
<img class="img-swap" src="img/warning.png" alt="">
<img class="img-swap" src="img/warning_orange.png" alt="" style="display:none">
</div>
<div class="RotateBox">
<div class="rotateLeft">
<img class="rotLeft" src="img/rotateRemove90.png" alt="">
</div>
<div class="rotateRight">
<img class="rotRight" src="img/rotateAdd90.png" alt="">
</div>
</div>
</div><!--bottomActions-->
<div class="imgContainer">
<img class="img" src="img/teste.jpg" alt="">
</div>
<div class="bottomActions">
<div class="action">
<a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla nunc, suscipit nec pellentesque sed, consequat ut ligula. Nam nec ullamcorper lacus. Duis cursus nunc nec interdum sollicitudin. Ut eu mollis elit, vel placerat purus. Phasellus viverra adipiscing luctus. Aenean quis ultricies ipsum. Fusce viverra sollicitudin dolor, nec cursus tellus mattis feugiat.">
<img src="img/chat.png" alt=""></a>
</div>
<div class="actionHeart">
<img class="img-swap" src="img/heart_grey_on.png" alt="">
<img class="img-swap" src="img/heart_grey_off.png" alt="" style="display:none">
</div>
<div class="actionWarning">
<img class="img-swap" src="img/warning.png" alt="">
<img class="img-swap" src="img/warning_orange.png" alt="" style="display:none">
</div>
<div class="RotateBox">
<div class="rotateLeft">
<img class="rotLeft" src="img/rotateRemove90.png" alt="">
</div>
<div class="rotateRight">
<img class="rotRight" src="img/rotateAdd90.png" alt="">
</div>
</div>
</div><!--bottomActions-->
我正在使用这个脚本
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
嗨,我有这个无法正常工作的 jquery 函数。我需要在同一页面上旋转多个图像,但脚本无法正常工作。该变量似乎从图像到图像到图像的值相同,谁能帮帮我???