どうすればボタンを押すと画像が切り替わるのですか？

Question

ギャラリーのページを動作させる方法は、ボタンを押すと画像が中央に表示され、同じ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コード：あなたはJavaScriptの上のいくつかの研究を行うために必要があるとしている

#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; 

} 

Answer 1

、いくつかのトピックはにオフがありますここにあなたを助ける側があります。このようなことにjQueryを使う方が簡単かもしれません。

たとえば、ボタンを選択して聴聞会を聞きたい場合は、ボタンリスナーが朗読を聞くと、画像のURLを保存した別の画像に切り替えるか、もう一方は表示しません。私はこれが助けて欲しい！

Answer 2

あなたは画像を表示する必要がある場合、クラス.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が結果

Answer 3

簡単な答えは、このようにすることができます参照するには。ボタンに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/