javascript - 单击旋转图像，jquery

Question

我尝试设置在单击链接后旋转的图像。总共有3个链接。如果单击第二个链接，图像将旋转 20 度。如果在第二个链接之后单击第三个链接，图像会旋转 +20 度。如果单击第一个链接，图像将旋转回默认位置。
概念简化:
link1 = 图片默认位置
link2 = 图片旋转20度
link3 = + 另一个 20 度
如果从link3点击到link2 -20度。

网站使用fullpage.js .旋转图像意味着导航点(参见示例 here )。 如果使用鼠标滚动，我不希望图像旋转，那远远超出了我的范围......

作为基础，我使用 jQuery rotate plugins example 5

var value = 0
$("#img").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
     } 

});

jsfiddle到目前为止......我什至不知道如何分配链接以便点击图像旋转。

非常感谢您的帮助。我不希望别人完成所有事情，请至少指导我的方向......

Answer 1

您可以只将点击事件绑定(bind)到 li。每次单击 li 时检查其文本。 并基于此旋转您的图像

尝试:

var value = 0;
$( "li" ).click(function() {
    var text=$(this).text();
    if(text==="Link1"){value=0;}
    if(text==="Link2"){value+=20;}
    if(text==="Link3"){value-=20;}
    $("#image").rotate({ animateTo:value});

});

DEMO