0

我对 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>

我append从另一个 Stack Overflow 示例中得到了这个函数。我想替换当前的图像，并且已经看到了一个建议来html()代替append()那个，但我想在开始更改示例之前我会尝试让它工作。

我还尝试了.load()图像本身的功能，仅使用下一张图像的 URL。这也不起作用，尽管试图在上面的示例中显示两者似乎可能会使阅读问题的人感到困惑。但是，如果您想向我展示如何以这种方式或两种方式解决它，那就太好了。

4

4 回答 4

3

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

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  $('#currentImage').attr('src', locationString);
}
于 2012-10-08T14:19:34.160 回答
0

你可以试试 $("#imageSlot").append(loadString); ?

于 2012-10-08T14:11:18.320 回答
0

将行更改为

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

并删除 append()- 行

于 2012-10-08T14:14:05.357 回答
0

为您的功能尝试以下类似的操作：

  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

  }
于 2012-10-08T14:36:58.090 回答