Question

我想做的是有一个包含图像的div，当按下按钮/迷你图片时，图像的来源将从1-2 2-3改变，等等每次添加1。这需要双向：即右箭头：1.jpg 2.jpg左箭头3.jpg 2.jpg现在剧本还需要包含一个IF语句，所以如果图片不存在，按钮将是可见性：隐藏;在css。像IF图片源5.jpg + 1之类的东西不存在#mini img visibility：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/

替换图片源（添加）

1 个答案: