Javascript 在相反方向上旋转两个图像

我对javascript完全陌生。现在，我正试图编写一个代码，使两个图像朝相反的方向旋转。你可以看到代码

HTML:

Javascript:

$(function() {

    var $rotaLeft = $(' .leftwheel'),
    var $rotaRight = $(' .rightwheel'),
        degreeRight = 0,
        degreeLeft = 0,
        timerLeft,
        timerRight;

    function rotateLeft() {    
        $rotaLeft.css({ transform: 'rotate(' + degreeLeft + 'deg)'});
        // timeout increase degrees:
        timerLeft = setTimeout(function() {
            ++degreeLeft;
            rotateLeft(); // loop
        },25);
    }
    function rotateRight() {    
        $rotaRight.css({ transform: 'rotate(' + degreeRight + 'deg)'});
        // timeout increase degrees:
        timerRight = setTimeout(function() {
            --degreeRight;
            rotateRight(); // loop
        },25);
    }

    rotateRight();
    rotateLeft();    // run

});

$(function() {

    var $rotaLeft = $(' .leftwheel'),
        degreeLeft = 0,
        timerLeft;

    function rotateLeft() {    
        $rotaLeft.css({ transform: 'rotate(' + degreeLeft + 'deg)'});
        // timeout increase degrees:
        timerLeft = setTimeout(function() {
            ++degreeLeft;
            rotateLeft(); // loop it
        },25);
    }
    rotateLeft();    // run it!

});

但两幅图像都没有旋转。但当我尝试使用以下javascript一次旋转一个时：

$(function() {

    var $rotaLeft = $(' .leftwheel'),
    var $rotaRight = $(' .rightwheel'),
        degreeRight = 0,
        degreeLeft = 0,
        timerLeft,
        timerRight;

    function rotateLeft() {    
        $rotaLeft.css({ transform: 'rotate(' + degreeLeft + 'deg)'});
        // timeout increase degrees:
        timerLeft = setTimeout(function() {
            ++degreeLeft;
            rotateLeft(); // loop
        },25);
    }
    function rotateRight() {    
        $rotaRight.css({ transform: 'rotate(' + degreeRight + 'deg)'});
        // timeout increase degrees:
        timerRight = setTimeout(function() {
            --degreeRight;
            rotateRight(); // loop
        },25);
    }

    rotateRight();
    rotateLeft();    // run

});

$(function() {

    var $rotaLeft = $(' .leftwheel'),
        degreeLeft = 0,
        timerLeft;

    function rotateLeft() {    
        $rotaLeft.css({ transform: 'rotate(' + degreeLeft + 'deg)'});
        // timeout increase degrees:
        timerLeft = setTimeout(function() {
            ++degreeLeft;
            rotateLeft(); // loop it
        },25);
    }
    rotateLeft();    // run it!

});

---

它正在工作。当尝试旋转这两个变量时，我做错了什么？

您以错误的方式声明了下面的变量

var $rotaLeft = $(' .leftwheel'),
var $rotaRight = $(' .rightwheel'),

应该是

var $rotaLeft = $(' .leftwheel'); // put semicolon instead of comma
var $rotaRight = $(' .rightwheel'),

或

Rest所有代码都正常工作：）

---

逗号分隔的值应在一个var声明下。这样声明变量

    var $rotaLeft = $(' .leftwheel'),
    degreeLeft = 0,
    timerLeft;

    var $rotaRight = $(' .rightwheel'),
    degreeRight = 0,       
    timerRight;

---

您可以使用

@keyframes动画

实现效果。这是

这是一个CSS代码

img{float:left;}
.leftwheel {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.rightwheel {
    -webkit-animation: rotation1 2s infinite linear;
    animation: rotation1 2s infinite linear;
  -moz-animation: rotation1 2s infinite linear;
}

@-webkit-keyframes rotation1 {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);}
}
@-moz-keyframes rotation1 {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);}
}
@keyframes rotation1 {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);}
}

---

你不允许使用CSS吗？我正在使用CSS。我需要无限旋转，这就是为什么要使用javascript。但是你可以像这样使用关键帧动画。。谢谢这就解决了问题。我对这种变量声明不太熟悉。：）凯玛·潘迪的回答以更好的方式解决了这个问题。不管怎样，这条建议真的很方便。：）

img{float:left;}
.leftwheel {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.rightwheel {
    -webkit-animation: rotation1 2s infinite linear;
    animation: rotation1 2s infinite linear;
  -moz-animation: rotation1 2s infinite linear;
}

@-webkit-keyframes rotation1 {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);}
}
@-moz-keyframes rotation1 {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);}
}
@keyframes rotation1 {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);}
}