替換圖片源（添加）

我想要做的是有一個包含圖像的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

替換圖片源（添加）

回答

相關問題