Question

我对JavaScript很新，但不是编程。我的练习是有一个显示图像的页面，并允许用户通过单击按钮转到下一个/上一个图像。我想在按钮单击时从服务器加载下一个/上一个图像，因此页面不必一次将所有图像加载到浏览器中。

这个版本只有一个按钮转到下一个图像，我正在尝试使用jQuery或AJAX加载它。该页面加载了初始的“image0”，JavaScript调试器显示onClick事件执行并执行我期望的操作，但图像不会更改。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var imageIndex = 0;
var jpgImageName = "image0"
var loadString = "images/" + jpgImageName + ".JPG";

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  var loadString = $("<img />").attr('src', locationString);
  $("imageSlot").append(loadString);
}

</script>
</head>
<body>

<div id="imageSlot">
  <img id="currentImage" src="images/image0.JPG" height="400" alt="image"+imageIndex/>
</div>
<button id="changeImage" onclick="changeImage()">Change Image</button>

</body>
</html>

我从另一个Stack Overflow示例中获得了append函数。我想要替换当前图像，并且已经看到了使用html()而不是append()的建议，但我想在开始更改示例之前尝试使其工作。

我还在图像上尝试了一个.load()函数，只有下一个图像的URL。这也没有用，虽然在上面的例子中尝试显示两者似乎可能会让人们在阅读这个问题时感到困惑。但如果你想告诉我如何以这种方式或两种方式解决它，那就太棒了。

Answer 1

如果您想用下一个图像替换当前图像，那么您可以尝试直接更改当前图像的src：

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  $('#currentImage').attr('src', locationString);
}

Answer 2

你可以试试$（“＃imageSlot”）。append（loadString）; ？

Answer 3

将行更改为

$('img').attr('src', locationString);

并删除append（） - line

Answer 4

尝试使用以下功能：

  function changeImage(){
      imageIndex++;
      imageIndex = imageIndex % 2; //here '2' is the number of images you have (result is always 0 or 1 in this case)
      var locationString = "images/image" + imageIndex + ".JPG";
      $('#currentImage').attr('src', locationString);//set the 'src' attribute inline

  }

JavaScript：单击按钮时的简单图像加载

4 个答案: