使用jQuery加载新图像

Question

如何使用jQuery加载新图像代替另一个图像？

我希望通过单击上一个或下一个按钮来执行此操作。请参阅下面的示例。 重要提示：我不知道服务器上有多少张照片（1或100）。所以，我无法在网页加载上加载它们。并且因为相同的原因而无法在javascript代码中执行数组

showing /img/1.jpg (click on button 'next')
showing /img/2.jpg (click on button 'next')
showing /img/3.jpg (click on button 'prev')
showing /img/2.jpg (click on button 'prev')
showing /img/1.jpg (click on button 'prev')

Answer 1

每次需要新图像时，您只需创建一个图像标记，然后将其附加到文档中，它将以异步方式加载。 e.g：

var $img = $("<img/>");
$img[0].src = "foo.jpg";
$("#someDiv").append($img);

所以你可以这样做：

$("#next").click(function() {
    $("#theImage").attr("src", "parse the number out of the filename, increment, put back");
});

Answer 2

var info = {
  images : ["/img/1.jpg","/img/2.jpg","/img/3.jpg"],
  current : 0
}
$("#imgID").live("click", function(){
  if(info.current++ > info.images.length) {
    info.current = 0;
  }
  $(this).attr("src",info.images[info.current]);
});


<img id="imgID" src="/img/1.jpg" />

我知道没有按钮，但是点击图片，这应该滚动它们。