javascript - 替换图片源(添加)

Question

我想要做的是有一个包含图像的div，当按下按钮/迷你图片时，图像的源将从1-2 2-3等更改，每次添加1。这需要双向进行:即右箭头: 1.jpg 2.jpg 左箭头 3.jpg 2.jpg 现在脚本还需要包含 IF 语句，因此如果图片不存在，按钮将可见:隐藏；在CSS中。像IF图片源5.jpg + 1之类的东西不存在#mini imgvisibility:hidden;目前我有一个想法，我可以使用与此不同但相似的东西(jQuery)。我之前使用这个脚本来更改悬停时的图像，我想我可以在单击时更改它并使用类似的东西。

$(function() { $('#buttons #right img').each(function() {
var originalSrc = this.src,
   hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_over.$1'); 
   image = new Image();

image.src = hoverSrc;

$(this).hover(function() {
  image.onload = function() {
}
  this.src = hoverSrc;
}, function() {
   this.src = originalSrc;
});
});
})

Answer 1

其实并不难

图像支持 onerror，因此只需加载图像 onclick 并 onload 替换源

var currentImage;    
function loadImage(img,dir) {
  currentImage = document.getElementById(img);
  var currentNumber = parseInt(currentImage.src.split("gallery/")[1]); // get the number
  var newNumber = currentNumber + (dir===1)?1:-1;
  var testImage = new Image();
  testImage.onload=function() {
    currentImage.src=this.src;  
    currentImage.style.visibility='visible'   
  }
  testImage.onerror=function() {
    currentImage.style.visibility='hidden'   
  } 
  testImage.src="gallery/"+newNumber+".jpg";
  return false;
}


<img id="image1" src="gallery/1.jpg" />
<a href="#" onclick="return loadImage('image1',-1)" title="prev"><img src="prev.gif" border="0" /></a>    <a href="#" onclick="return loadImage('image1',1)" title="next"><img src="next.gif" border="0" /></a>

更新:jQuery 版本:http://jsfiddle.net/mplungjan/8FB5z/2/