Next Prev显示Jquery的小错误

Question

我的下一个和上一个有点问题。

当我点击上一个按钮时，第一次没有任何反应。我试过了alert(url(' + images[i++] + '));

但第一次是空的。但是当我按下第二次时，它工作正常。同样的事情发生在下一个按钮。我不知道造成这个问题的原因。

非常感谢任何帮助。

HTML：

<div id="containerBox1">
  <ul class="buttons" style="margin-top: 182px;">
      <li><a class="triggerright masterTooltip" id="right1" title="Next">Right</a></li>
      <li><a class="triggerleft masterTooltip" id="left1" title="Previous">Left</a></li>
  </ul>
</div>

JS：

<script>
    var getUrl = 'images/Logos/facebook.png';
    var refreshInterval;
    var i = 1;
    $(document).ready(function() {
    var images = ['images/Logos/facebook.png', 'images/Logos/gmail.png', 'images/Logos/twitter.png'];

    function changeBackground() {
      getUrl = images[i];
      $('#containerBox1').css('background-image', function() {
          if (i >= images.length) {
              getUrl = 'images/Logos/facebook.png';
              i = 0;
          }
          return 'url(' + images[i++] + ')';
      });
    }

    // Set an interval to continue
    //refreshInterval = setInterval(changeBackground, 8000);

    $("#left1").click(function() {

      // Clear interval
      //clearInterval(refreshInterval);
      $('#containerBox1').css('background-image', function() {
          if (i <= 0) {
              i = images.length;
          }
          return 'url(' + images[--i] + ')';
      });
    });

    $("#right1").click(function() {
      // Clear interval
      //clearInterval(refreshInterval);

      $('#containerBox1').css('background-image', function() {
          if (i >= images.length) {
              i = 0;
          }
          return 'url(' + images[i++] + ')';
      });

      // Set interval again
      //setInterval(changeBackground, 8000);
    });
    });
  </script>