Question

我想在页面中央显示图像，然后在左侧和右侧显示2个按钮。当我单击左侧时，图像将更改为上一个图像，然后单击右键移动到下一个图像。代码不起作用。谁能告诉我错误在哪里？

<table id="frontpage">
  <tr>
    <td><input type="button" id="left" value="left"/></td>
    <td><img id="image" alt="Image" src="./image/guildwars2/gw2_fight.jpg"/></td>
    <td><input type="button" id="right" value="right"/></td>
  </tr>
</table>


$(document).ready(function(){
  var image=new Array();
  var current=0;

  image[0]=new Image();
  image[0].src="./image/guildwars2/gw2_fight.jpg";
  image[1]=new Image();
  image[1].src="./image/diablo3/d3.jpg";
  image[2]=new Image();
  image[2].src="./image/dota2/catOnWater.jpg";

  $("#left").click(function(){
    if(current-1<0){
      current=image.length-1;
      $("#image").attr("src")=image[current].src;
    }
    else{
      --current;
      $("#image").attr("src")=image[current].src;
    }
  });

  $("#right").click(function(){
    if(current+1>image.length-1){
      current=0;
      $("#image").attr("src")=image[current].src;
    }
    else{
      ++current;
      $("#image").attr("src")=image[current].src;
    }
  });
})

Answer 1

此：

$("#image").attr("src")=image[current].src;

不正确。 $("#image").attr("src")不是变量，因此您无法为其指定值。如果要使用jQuery设置属性的值，则需要执行以下操作：

 $("#image").attr("src", image[current].src);

Answer 2

  $("#left").click(function(){
    if(current-1<0){
      current=image.length-1;
      $("#image").attr("src", image[current].src);  // Amendment as mentioned
    }
    else{
      current--;  //Slight change here
      $("#image").attr("src", image[current].src);
    }
  });

  $("#right").click(function(){
    if(current+1>image.length-1){
      current=0;
      $("#image").attr("src", image[current].src);
    }
    else{
      current++;  //Slight change here
      $("#image").attr("src", image[current].src);
    }
  });

通过单击左右来更改图像

2 个答案: