Javascript 我怎样才能使按下按钮时图像切换？

我希望gallery页面的工作方式是，当按下按钮时，图像将把图片带到中间，使其具有相同的CSSsize和白色阴影，然后其他图像将具有较小的CSS和黑色阴影

HTML代码：

    <img id="Football" src="https://w-dog.net/wallpapers/3/12/331652870386587/club-stadium-sees-camp-nou-football-game-wallpaper-the-field-camp-nou-barcelona-spain-barcelona-the-player-match-sports-andres-iniesta.jpg" alt="Football">

    <img id="Boxing" src="http://i.lv3.hbo.com/assets/images/sports/boxing/fights/2015-05-02-mayweather-vs-pacquiao/slideshow/mayweather-vs-pacquiao-ss-03-1024.jpg" alt="Boxing">

    <img id="Basketball" src="http://wallpapercave.com/wp/WNc38uX.jpg" alt="Basketball">

---

您将不得不对JavaScript进行一些研究，这里有一些主题将对您有所帮助。对于这样的东西，使用jQuery可能更容易

---

例如，您可能希望选择按钮并侦听一次按下，然后当按钮侦听器听到一次按下时，它会将图像的URL切换到您存储的另一个图像，或者您可以将一个切换为显示，另一个切换为不显示。我希望这有帮助

您可以这样做，class.show控制是否应该显示图像

设currImage=0 const changeImage=\u=>{ const images=Array.fromdocument.queryselectoral'ImgContainer>img' 图像[currImage]。类列表。删除“显示” 图像[currImage=currImage+1%images.length]。类列表。添加“显示” } IMG容器{ 宽度：550px； 高度：300px； 位置：绝对位置； 利润率：3em-2em； 边界半径：10px； 盒影：0px 0px 100px黑色； } ImgContainer>img{宽度：100%；高度：100%；位置：绝对；顶部：0；左侧：0；显示：块；边距：0} ImgContainer>img:not.show{display:none} 拳击{ 不透明度：0.8； } 足球{ 盒影：0px 0px 50px白色； } 篮球{ 不透明度：0.9； }

---

点击我简单的答案可以是这样的。只需向按钮添加onclick功能。这是你的HTML

<img id="Football" src="https://w-dog.net/wallpapers/3/12/331652870386587/club-stadium-sees-camp-nou-football-game-wallpaper-the-field-camp-nou-barcelona-spain-barcelona-the-player-match-sports-andres-iniesta.jpg" alt="Football">

<img id="Boxing" src="http://i.lv3.hbo.com/assets/images/sports/boxing/fights/2015-05-02-mayweather-vs-pacquiao/slideshow/mayweather-vs-pacquiao-ss-03-1024.jpg" alt="Boxing">

<img id="Basketball" src="http://wallpapercave.com/wp/WNc38uX.jpg" alt="Basketball">


<button id="Save">Click Me</button>

---

以下是JSFIDLE供参考

向我们展示到目前为止你已经得到的js。实际上我没有，我是javascriptOk的初学者，你可以尝试使用一个类来确定它应该是什么样子，看看

<img id="Football" src="https://w-dog.net/wallpapers/3/12/331652870386587/club-stadium-sees-camp-nou-football-game-wallpaper-the-field-camp-nou-barcelona-spain-barcelona-the-player-match-sports-andres-iniesta.jpg" alt="Football">

<img id="Boxing" src="http://i.lv3.hbo.com/assets/images/sports/boxing/fights/2015-05-02-mayweather-vs-pacquiao/slideshow/mayweather-vs-pacquiao-ss-03-1024.jpg" alt="Boxing">

<img id="Basketball" src="http://wallpapercave.com/wp/WNc38uX.jpg" alt="Basketball">


<button id="Save">Click Me</button>

 document.getElementById("Save").onclick  = function() {
document.getElementById('Football').src = 'http://cdn.gsmarena.com/imgroot/reviews/17/htc-u11-galaxy-s8plus/-728x314/gsmarena_002.jpg';
document.getElementById('Boxing').src = 'http://cdn.gsmarena.com/imgroot/news/17/05/samsung-galaxy-s8-dxo/-344x215/gsmarena_001.jpg';
document.getElementById('Basketball').src = 'http://cdn.gsmarena.com/imgroot/news/16/06/zenfone-max-marshmallow/-344x215/gsmarena_001.jpg';
}