我想通过以下方式让我的幻灯片更改图片：按一个按钮应该将显示的图像更改为按下的按钮

基本上我使用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++按下一个按钮，按下按钮

我想通过以下方式让我的幻灯片更改图片：按一个按钮应该将显示的图像更改为按下的按钮

回答

相关问题