Javascript jQuery切换图像旋转

我需要运行下面的代码示例，以便它在切换上工作，因此当单击div时，它将启动图像旋转，当再次单击它时，它将启动，依此类推？ 提前感谢：）

例如：

如果你看这个例子：jsfiddle.net/AKgZn/2当点击白色方块（#pause_button1）时，它需要循环，当它循环时，你再次点击循环方块，它会返回白色方块

html:

关键是全局变量window.is_已切换，尽管您可以使用任何名称：window.my_variable或其他任何名称。幸运的是，您不需要首先用“var”声明它！未定义=真

---

希望有帮助？祝你好运

您可以在围绕代码的闭包中放置一个切换标志，它的优点是不引入全局变量

(function() {
    var toggled = true; // toggle flag in a closure

    var changeImage = function(element, imageNumber) {
        imageNumber++;

        if(imageNumber > 6) {
            imageNumber = 1;
        }
        console.log(imageNumber);
        element.addClass('pause_button' + imageNumber, 200);

        element.attr('class', 'pause_button' + imageNumber);
        setTimeout(function(){changeImage(element, imageNumber)}, 200);  
    };

    $('#pause_button1').click(function() {
        if (toggle) {
            changeImage($('#pause_button'), 0);
        } else {
            // do what should happen if not toggled
        }
        toggle = !toggle; // flip the toggle
    });
})(this); 

---

如果你看这个例子：当白色方块（#pause_按钮1）出现时，它需要循环点击后，当它循环，你再次点击循环方块时，它会返回到白色方块。嘿，我在一个实时版本上尝试过它，但仍然不工作？我如何让它总是在同一个div上停止和开始？像这样：你能投票给我的答案吗？谢谢！：）

<div id="pause_button" class="pause_button1">

$('#pause_button').click(function() {

    //Initially sets global variable is_toggled to true, then
    //toggles it back and forward to true and false
    window.is_toggled = !window.is_toggled;
    if (window.is_toggled) { 
      function changeImage(element, imageNumber){

          imageNumber++;

          if(imageNumber > 6){
            imageNumber = 1;
          }
          console.log(imageNumber);
          element.attr('class','pause_button' + imageNumber);
          window.timeOutId = setTimeout(function(){changeImage(element, imageNumber)}, 200); 
      }
      changeImage($('#pause_button'), 0);    
  } else {
       clearTimeout(window.timeOutId);
       $('#pause_button').attr('class','pause_button' + 1);
  }  
});

(function() {
    var toggled = true; // toggle flag in a closure

    var changeImage = function(element, imageNumber) {
        imageNumber++;

        if(imageNumber > 6) {
            imageNumber = 1;
        }
        console.log(imageNumber);
        element.addClass('pause_button' + imageNumber, 200);

        element.attr('class', 'pause_button' + imageNumber);
        setTimeout(function(){changeImage(element, imageNumber)}, 200);  
    };

    $('#pause_button1').click(function() {
        if (toggle) {
            changeImage($('#pause_button'), 0);
        } else {
            // do what should happen if not toggled
        }
        toggle = !toggle; // flip the toggle
    });
})(this);