替换图片源（添加）

我想要做的是有一个包含图像的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）。我以前用这个脚本来改变悬停的图像，我想我可以改变它onclick和使用类似的东西。替换图片源（添加）

$(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; 
}); 
}); 
})

来源

2011-04-30 Jason

这是不是真的很难

图像支持的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/

来源

2011-04-30 06:00:41 mplungjan

这是容易在jQuery中做？你知不知道怎么？ – Jason 2011-04-30 06:14:38

我想我可以弄清楚如何在jQuery中做到这一点。现在我需要在某个地方。今天晚些时候可能会有许多jQuery专家醒来。如果没有，我会试一试。 – mplungjan 2011-04-30 06:28:40

@mplungjan好吧:)我会等待。 – Jason 2011-04-30 06:35:36

替换图片源（添加）

回答

相关问题