使用按鈕來交換圖像Javascript html

我是JavaScript新手，我試圖通過將許多功能集成到一個來簡化我的生活。使用按鈕來交換圖像Javascript html

我有一個非常簡單的操作，它允許點擊一個按鈕來加載特定的圖像，而不是默認的圖像。作爲反對有許多功能做同樣的事情，我寧願只有一個。

我想你可以將圖像存儲在一個數組中，並按位置選擇它們？

這是我到目前爲止。

function swap1() { 
    document.getElementById("default").src="321.jpg"; 
} 

function swap2() { 
    document.getElementById("default").src="432.jpg"; 
} 

function swap3() { 
    document.getElementById("default").src="742.jpg"; 
}

<input type="button" onClick="swap1()"> 
<input type="button" onClick="swap2()"> 
<input type="button" onClick="swap3()">

來源

2013-07-27 dpalm

使用功能參數：

function swap(imgNumber) 
{ 
document.getElementById("default").src=imgNumber+".jpg"; 
}

及更高版本：

<input type="button" onclick="swap('321')"> 
<input type="button" onclick="swap('432')"> 
<input type="button" onclick="swap('742')">

要回答的評論（不是最好的js代碼，但表現出的想法的變量）：

var clip=false; 
function setClip(val) { 
    clip=val; 
} 
function swap(imgNumber) 
{ 
    if(clip==true) 
    document.getElementById("default").src=imgNumber+"clip.jpg"; 
    else 
    document.getElementById("default").src=imgNumber+".jpg"; 
} 


<input type="button" onclick="swap('321')"> 
<input type="button" onclick="swap('432')"> 
<input type="button" onclick="swap('742')"> 
<input type="button" onclick="setClip(true)">

只要你添加變量，它需要真/假 - 最後一個按鈕設置clip變量true - 我們改變了交換功能，以檢查是否clip是真實的 - 如果是 - 它加載不同的文件

來源

2013-07-27 22:44:58

這工作完美。如果可以的話，我還有一個問題。基本上我用它來顯示已經過特定分類的衛星圖像。圖像全部以.jpg格式存儲。用戶有能力（如你已經知道的）點擊單獨的按鈕，321,432,742。是否有可能添加一個額外的按鈕，如果在其中一個前進按鈕之後點擊，將加載任一按鈕（321clip.jpg，432clip .jpg，742clip.jpg）？有點像一連串的事件？ – dpalm

我已編輯答案 –

你可以這樣做這

function swap(string img) 
{ 
    document.getElementById("default").src=img; 
}

HTML

<input type ="button" onClick="swap('321.jpg')"> 
<input type ="button" onClick="swap('432.jpg')"> 
<input type ="button" onClick="swap('742.jpg')">

來源

2013-07-27 22:45:35

使用按鈕來交換圖像Javascript html

回答

相關問題