我怎么能这样做，当我按下按钮的图像会切换？

-2

我希望画廊页面工作的方式是，当按钮被按下时，图像将把图片带到中间，并使其成为相同的CSS（大小和白色阴影），然后其他图像将与另一个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">

CSS代码：

#Boxing{ 
    width:550px; 
    height:300px; 
    position:absolute; 
    margin-left:-200px; 
    margin-top:350px; 
    border-radius:10px; 
    z-index:-1; 
    opacity:0.8; 
    box-shadow: 0px 0px 100px black; 
} 

#Football{ 
    width:550px; 
    height:400px; 
    position:relative; 
    margin-left:550px; 
    margin-top:300px; 
    box-shadow: 0px 0px 50px white; 
    border-radius:10px; 

} 

#Basketball{ 
    width:550px; 
    height:300px; 
    position:absolute; 
    margin-left:-900px; 
    margin-top:350px; 
    border-radius:10px; 
    z-index:-1; 
    box-shadow: 0px 0px 100px black; 
    opacity:0.9; 

}

来源

2017-05-24 Hadi Chraim

向我们展示您到目前为止获得的js。 – gaynorvader

我实际上没有，我是初学者在javascript –

好吧，你可以尝试使用一个类来确定它应该是什么样子，看看[this]（https://stackoverflow.com/questions/195951/change-一个元素级与 - 的JavaScript） – gaynorvader

你将不得不做的JavaScript的一些研究，也有一些话题来关闭这边会帮助你。对于像这样的东西使用jQuery可能更容易。

例如，您可能想要选择按钮并听按按钮，然后当按钮听众听到按钮时，它会将图片的URL切换为您存储的不同图片，或者您可以将其切换为显示，另一个不显示。我希望这有帮助！

来源

2017-05-24 15:53:24 Branduo

您可以这样做，其中类.show控制是否应显示图像。

let currImage = 0 
 

 
const changeImage = _ => { 
 
    const images = Array.from(document.querySelectorAll('#ImgContainer > img')) 
 
    images[currImage].classList.remove('show') 
 
    images[currImage = (currImage+1)%images.length].classList.add('show') 
 
}

#ImgContainer { 
 
    width: 550px; 
 
    height: 300px; 
 
    position: absolute; 
 
    margin: 3em 2em; 
 
    border-radius: 10px; 
 
    box-shadow: 0px 0px 100px black; 
 
} 
 

 
#ImgContainer > img {width: 100%;height: 100%;position:absolute;top:0;left:0;display: block;margin:0} 
 

 
#ImgContainer > img:not(.show) {display:none} 
 

 
#Boxing { 
 
    opacity: 0.8; 
 
} 
 

 
#Football { 
 
    box-shadow: 0px 0px 50px white; 
 
} 
 

 
#Basketball { 
 
    opacity: 0.9; 
 
}

<section id="ImgContainer"> 
 
    <img id="Football" class='show' 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"> 
 
</section> 
 

 
<button onclick='changeImage()'>Click Me</button>

注：点击Run Code Snippet看到的结果

来源

2017-05-24 15:56:46

简单的回答可以是这样的。只需在按钮上添加一个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>

这是JS的方式。

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'; 
}

这里是JSfiddle供参考。 https://jsfiddle.net/soqrcwhq/

来源

2017-05-24 16:06:53 Aijaz

我怎么能这样做，当我按下按钮的图像会切换？

回答

相关问题