我想通過以下方式讓我的幻燈片更改圖片：按一個按鈕應該將顯示的圖像更改爲按下的按鈕

基本上我使用z-index並通過單擊按鈕，它應該採取背面圖片，並將其放在前面，反之亦然。我目前堅持試圖讓按鈕工作。我想通過以下方式讓我的幻燈片更改圖片：按一個按鈕應該將顯示的圖像更改爲按下的按鈕

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
     <title>Lab 5, Part 1</title> 
     <meta charset="utf-8" /> 
     <script type="text/javascript" src="stacking.js"> 
      function Luka() { 
       var x = document.getElementById('anime1'); 
       var z = x.style.zIndex 
       if (z == 10) z = 20; 
       else z = 10; 
       x.style.zIndex = z; 
      } 
     </script> 
     <style type="text/css"> 
      .anime1 { 
       position: absolute; 
       top: 50px; 
       left: 50px; 
       z-index: 10; 
      } 
      .anime2 { 
       position: absolute; 
       top: 100px; 
       left: 100px; 
       z-index: 15; 
      } 
     </style> 
    </head> 

    <body> 
     <p> 
      <img class="anime1" id="anime1" height="300" width="450" src="http://images5.fanpop.com/image/photos/29300000/Megurine-Luka-megurine-luka-29391390-1680-1050.jpg" alt="(Picture of Luka)" /> 
      <img class="anime2" id="anime2" height="300" width="450" src="http://orig06.deviantart.net/a28f/f/2015/079/9/a/hinata_final_lr_by_artgerm-d8me6vb.jpg" alt="(Picture of Hinata)" /> 
     </p> 
     <input type="button" value="Luka" onclick="Luka();"> 
     <input type="button" value="Hinata" onclick="Hinata();"> 
    </body> 

</html>

來源

2015-10-20 Chynna Doll

<script type="text/javascript"> 
     function Luka() { 
      document.getElementById('anime1').style.zIndex = 20; 
      document.getElementById('anime2').style.zIndex = 10; 
     } 
     function Hinata() { 
      document.getElementById('anime2').style.zIndex = 20; 
      document.getElementById('anime1').style.zIndex = 10; 
     } 
    </script>

與此代碼替換您並檢查是否正常工作

來源

2015-10-20 07:04:20 Fisher

這工作完美。謝謝 –

<!DOCTYPE html> 
 
<html lang = "en"> 
 
<head> 
 
<title>Lab 5, Part 1</title> 
 
<meta charset = "utf-8"/> 
 
<script type = "text/javascript" > 
 
function Luka(){ 
 
var x=document.getElementById('anime1'); 
 
var z=x.style.zIndex 
 
if (z==10) z=20; 
 
else z=10; 
 
x.style.zIndex=z; 
 
} 
 
</script> 
 
<style type = "text/css"> 
 
.anime1 {position: absolute; 
 
top: 50px; left: 50px; z-index: 10;} 
 
.anime2 {position: absolute; 
 
top: 100px; left: 100px; z-index: 15;} 
 
</style> 
 
</head> 
 
<body> 
 
<p> 
 
<img class = "anime1" id = "anime1" height = "300" 
 
width = "450" src = "http://images5.fanpop.com/image/photos/29300000/Megurine-Luka-megurine-luka-29391390-1680-1050.jpg" 
 
alt = "(Picture of Luka)"/> 
 
<img class = "anime2" id = "anime2" height = "300" 
 
width = "450" src = "http://orig06.deviantart.net/a28f/f/2015/079/9/a/hinata_final_lr_by_artgerm-d8me6vb.jpg" 
 
alt = "(Picture of Hinata)"/> 
 
</p> 
 
<input type="button" value="Luka" onclick="Luka();"> 
 
<input type="button" value="Hinata" onclick="Hinata();"> 
 

 
</body> 
 
</html>

你所做的一切都是正確的。除非您在使用內聯代碼時在腳本標記上設置了SRC屬性。

來源

2015-10-20 07:08:11 PC3TJ

我不知道你到底想要完成什麼，如果這是一個任務，指出你應該使用z-index屬性，但對於幻燈片，你可能想要設置opacity屬性的動畫或只是簡單地設置display =當前沒有顯示的那個「none」。不同大小的圖片將通過簡單地使用z-index – PC3TJ

來顯示彼此。謝謝你幫助我。這項任務有點令人困惑，但這確實幫了我很多謝意。 –

當然Chynna。我曾經是一名學生，我完全理解。請記住，如果您爲腳本設置了SRC屬性並將腳本包含在您的之間，那麼這將是非常不可預測的，但大多數大佬都會忽略這兩者，並且該腳本將無法加載。如果您必須導入JS文件幷包含內聯JavaScript，請使用兩個分開的

11. 我想改變按鈕的圖像。當我點擊圖片

12. 如何更改按鈕圖像時，按下按鈕

13. 當按下按鈕時更改視圖

14. 如何通過按其他按鈕來更改一個按鈕的圖像？

15. CodenameOne按下按鈕時更改按鈕

16. 對齊圖片幻燈片按鈕HTML5

17. Android - 如何更改按鈕編程時按下背景圖片？

18. 幻燈片按鈕 - jQuery的

19. 更改按鈕的背景圖片

20. 更改不帶額外按鈕的按鈕的背景圖片

21. ASP.net圖像按鈕，更改按鈕IIMAGE

22. Java：更改循環中按鈕的圖像圖標（用於幻燈片）

23. 使用單個圖像按下時更改按鈕的顏色

24. 我想將按鈕更改爲禁用

25. 根據按下哪個按鈕，使用UIImagePickerController更改正確按鈕的圖像

26. Swift 3通過按下另一個按鈕來更改按鈕的顏色

27. 更改按鈕上的背景圖像按多個按鈕

28. 更改圖像按鈕當按下並釋放圖像時

29. 我想同時更改圖像按鈕的圖像onClick事件

30. 更改接口方向爲縱向通過在cocos2dx V2 C++按下一個按鈕，按下按鈕

我想通過以下方式讓我的幻燈片更改圖片：按一個按鈕應該將顯示的圖像更改爲按下的按鈕

回答

相關問題