使用javascript onclick函数更改三个图像

Question

我有 3 张图片，我想通过单击箭头图片来更改这些图片，但我遇到了问题。
我创建了一些跟踪器来保存图片地址，但它不起作用。
当我使用此功能时，它只是将图片从第一张图片更改为第三张图片。所以我不能连续显示 3 张图片。
我需要的是，当我单击箭头图像时，可以连续更改第一张图片、第​​二张图片和第三张图片。

function change(){
  img_tracer = new Array () ;
  img_tracer[0] = '1';
  img_tracer[1] = '2';
  img_tracer[2] = '3';

  images = new Array ();
  images[0] = document.getElementById('tech').src = "images1.jpg";
  images[1] = document.getElementById('tech').src = "images2.jpg";
  images[2] = document.getElementById('tech').src = "images3.jpg";

  if ( images[0] )
    img_tracer[0];
  else if ( images[1] )
    img_tracer[1];
  else if ( images[2] )
    img_tracer[2];

  var arrow1 = document.getElementById('arr1');

  if ( arrow1 ) {

    if (img_tracer[0])
      images[1];  
    else if (img_tracer[1])
      images[2];
    else if (img_tracer[2])
      images[2];
  }
}

<table align="center">
  <tr><td width="100px;" id="arr1" name="arr1" background="imagesright.jpg"onclick="change()"></td><td>
    <img src="images1.jpg" alt="Technology" id="tech" name="tech" align="middle" /></td>
    <td width="100px;" id="arr2" name="arr2" background="imagesleft.jpg" style="background-repeat: no-repeat" onclick="change()">
    </td></tr>
</table>

如果你能帮助我，我将不胜感激。

Answer 1

我想这就是你要找的东西：http://jsfiddle.net/xms7v9vv/

HTML：

<table align="center">
  <tr><td width="100px;" id="arr1" name="arr1" background="imagesright.jpg"onclick="change(this)"></td><td>
    <img src="images1.jpg" alt="Technology" id="tech" name="tech" align="middle" /></td>
    <td width="100px;" id="arr2" name="arr2" background="imagesleft.jpg" style="background-repeat: no-repeat" onclick="change(this)">
    </td></tr>
</table>

Javascript：

var images = [];
images[0] = "images1.jpg";
images[1] = "images2.jpg";
images[2] = "images3.jpg";

var currentImage = 0;

var change = function(td){
  if(td.getAttribute("name") == "arr1"){
    // Go left
    --currentImage;
    if(currentImage == -1)
      currentImage = 2;
  }else{
    // Go right
    ++currentImage;
    if(currentImage == 3){
      currentImage = 0;
    }
  }

  document.getElementById('tech').src = images[currentImage];
};

Answer 2

这应该足够有效。您应该只有 1 个包含所有图像的数组，并且只需更新当前索引。

var currentId = 0;

function setImage(id, src) {
  document.getElementById(id).src = src;
}

var images = [
  "http://placehold.it/200x160/ff0000/00ffff.png&text=1",
  "http://placehold.it/200x160/00ff00/ff00ff.png&text=2",
  "http://placehold.it/200x160/0000ff/ffff00.png&text=3"
];

window.change = function(direction) {
  currentId += direction;

  if (currentId > images.length - 1) {
    currentId = 0;
  } else if (currentId < 0) {
    currentId = images.length-1;
  }

  setImage('tech', images[currentId]);
}

.nav {
  border: thin solid #000;
  text-align: center;
  font-size: 64px;
  font-weight: bold;
}

<table align="center">
  <tr>
    <td class="nav" width="100px;" id="arr1" name="arr1" onclick="change(-1)">&lt;</td>
    <td align="center">
      <img src="http://placehold.it/200x160/ff0000/00ffff.png&text=1" alt="Technology" id="tech" name="tech" />
    </td>
    <td class="nav" width="100px;" id="arr2" name="arr2" onclick="change(1)">&gt;</td>
  </tr>
</table>