Retina.js交换阵列中的图像

Question

我使用Retina.js替换我网站上的图像用于视网膜屏幕。它工作正常但是当我从数组交换图像时我遇到了问题。我在屏幕中间有一个图像，每隔3秒就会变成一个存储在数组中的不同图像。像这样：

   <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 1600);
          }

          var images = [], x = -1;

          images[0] = "smallslide2.png";
          images[1] = "smallslide3.png";
          images[2] = "smallslide4.png";
          images[3] = "smallslide5.png";
          images[4] = "smallslide1.png";
      </script>

在我的HTML中我有：

 <p class="centeredImage">
                <img id ="img" src="smallslide1.png">
 </p>

第一张幻灯片工作并显示视网膜图像，我猜这是因为它使用标准图像检测，即替换图像src =＆＃34; ＆＃34;，对于其余的图像，它不起作用。有没有办法让它适用于阵列中的图像？对此的任何指示都将非常感激。谢谢！

编辑：

 if (document.getElementById("img").src===smallslide1@2x.png){

    images[0] = "smallslide2@2x.png";
  images[1] = "smallslide3@2x.png";
  images[2] = "smallslide4@2x.png";
  images[3] = "smallslide5@2x.png";
  images[4] = "smallslide1@2x.png";

  }
  else {

    images[0] = "smallslide2.png";
  images[1] = "smallslide3.png";
  images[2] = "smallslide4.png";
  images[3] = "smallslide5.png";
  images[4] = "smallslide1.png";



  }