Javascript多個圖像更改與按鈕單擊

好吧，這就是我想要做的，它是早些時候太模糊，所以這裏有一個更好的解釋，請記住，我只編程了2周的頁面，所以任何幫助表示讚賞。Javascript多個圖像更改與按鈕單擊

我需要創建一個HTML/JavaScript網頁，顯示三張圖片以及每張圖片的標題（描述）。對於每個圖像，我還需要創建一個按鈕，將第一張圖像更改爲同一主題上的不同圖像（並更改標題）。還需要有一個按鈕，可將所有三個圖像恢復爲原始圖像。

我得到的編碼工作，以便一個圖像將更改爲另一個按鈕單擊，但後來當我添加我的第二和第三編碼什麼都不會工作了。

<html> 
<head> 
<script> 

function changeImage() 
{ 
var img = document.getElementById("image"); 
img.src="http://cdn.memegenerator.net/images/300x/159304.jpg"; 
return false; 
} 

</script> 

</head> 
<body> 
<img id="image" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" /> 
<br><br><br> 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 

<script> 

function changeImage() 
{ 
var img = document.getElementById("image1"); 
img.src="http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg"; 
return false; 
} 

</script> 

<body> 
<img id="image1" src="http://static.guim.co.uk/sys- images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" /> 
<button id="Click1" onclick="changeImage();">Click to change!</button> 
</body> 

<br> 

<script> 

function changeImage() 
{ 
var img = document.getElementById("image2"); 
img.src="http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg"; 
return false; 
} 

</script> 

<body> 
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg" /> 
<button id="Click2" onclick="changeImage();">Click to change!</button> 
</body> 

<br> 

</html>

來源

2012-11-04 Circus

嗨乍得，歡迎來到Stackoverflow。你在這篇文章中提到你在前面的問題中「太模糊」了。這個更好一點，但我建議你也發佈你的代碼，或者轉到jsfiddle.net，並在你的問題中提供一個例子來說明你遇到的問題。這會加強你的答案，所以我們可以更好地幫助你，你可以得到你的問題的答案！希望這可以幫助你一點，並再次歡迎SO！ – JasCav

這是我用於第一圖像切換的編碼，然後我試圖複製它，同時改變IMG ID和它使得代碼停止工作的其餘部分：） – Circus

<按鈕ID = 「clickme」的onclick = 「changeImage（）;」>點擊來改變圖像！ – Circus

有在你的頁面的幾個問題：缺少文檔類型聲明，缺少title標籤，實際內容的HTML head和多body標籤。除此之外，changeImage()在每個script中被替換爲新的。最後將只有最後一個功能，它將src更改爲#image2。

如果我理解正確你的問題，你需要的東西是這樣的：

的script在head：

function changeImage (element) { 
    var n, 
     imageData = [ 
      [ 
       { 
        src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg", 
        caption: "Caption for image 1.1" 
       }, 
       { 
        src: "http://cdn.memegenerator.net/images/300x/159304.jpg", 
        caption: "Caption for image 1.2" 
       } 
      ], 
      [ 
       { 
        src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg", 
        caption: "Caption for image 2.1" 
       }, 
       { 
        src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg", 
        caption: "Caption for image 2.2" 
       } 
      ], 
      [ 
       { 
        src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg", 
        caption: "Caption for image 3.1" 
       }, 
       { 
        src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg", 
        caption: "Caption for image 3.2" 
       } 
      ] 
     ]; 
    if (element > -1) { 
     document.getElementById('image' + element).src = imageData[element][1].src; 
     document.getElementById('caption' + element).innerHTML = imageData[element][1].caption; 
    } else { 
     for (n = 0; n < imageData.length; n++) { 
      document.getElementById('image' + n).src = imageData[n][0].src; 
      document.getElementById('caption' + n).innerHTML = imageData[n][0].caption; 
     } 
    } 
    return; 
}

而且body：

<body> 
    <button onclick="changeImage(-1);" >Click to restore all!</button> 
    <div> 
     <h1 id="caption0">Caption for image 1.1</h1> 
     <button onclick="changeImage(0);">Click to change!</button> 
     <img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" /> 
    <div> 
     <h1 id="caption1">Caption for image 2.1</h1> 
     <button onclick="changeImage(1);">Click to change!</button> 
     <img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" /> 
    </div> 
    <div> 
     <h1 id="caption2">Caption for image 3.1</h1> 
     <button onclick="changeImage(2);">Click to change!</button> 
     <img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" /> 
    </div> 
</body>

，你可以請參閱，路徑和標題的數據位於嵌套數組中的對象中。這樣它們與實際內容分開，代碼更容易維護。

您沒有提供圖像標題佈局的示例，因此我將標題信息放置在圖像上方的H1標記中。隨意更改元素及其位置。注意，你也可以在標題文本中使用HTML標籤。

但是，執行此代碼時，CPU時間有一些限制和浪費：每次點擊都會創建imageData，每個元素只能使用兩個不同的路徑。

我建議你有更多的面向對象的方法來完成任務。請看看這個JSfiddle，它表現出非常相似的功能，並且更靈活，也許更容易維護。

來源

2012-11-04 15:14:11 Teemu

非常感謝有關編碼的查閱和幫助，我很感激。 – Circus

工作就像一個魅力，我沒有意識到我可以將所有3個腳本編碼成一個，並認爲我必須分開他們各自由於佈局（非常新，如我所說），非常感謝。 – Circus

謝謝，我想也許我的JSFiddle太重了=）。您是否訪問過https://developer.mozilla.org/en-US/，在那裏您可以找到有關JS，CSS，HTML等的基礎知識和高級信息。 – Teemu

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script> 
     var dd = 5; 
     var cnt = 0; 
     function chng() { 

      var rotator = document.getElementById('rr'); // change to match image ID 
      var imageDir = 'Images/';       // change to match images folder 


      var images = ['2.jpg', '3.jpg', '4.jpg', '5.jpg']; 

      cnt++; 

      var len = images.length; 
      if (cnt < dd) { 
       rr.src = imageDir + images[cnt]; 
      } 
      else if (cnt == len) { 
       rr.src = imageDir + images[0]; 
       cnt = 0; 
      } 
     } 

</script> 

</head> 
<body> 
<img src="Images/1.jpg" id="rr" height="500" width="650"> 

    <input type="button" value=" next. . " onclick="chng()" /> 
</body> 
</html>

來源

2013-04-19 08:22:32

Javascript多個圖像更改與按鈕單擊

回答

相關問題