我怎麼能這樣做，當我按下按鈕的圖像會切換？

-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

我怎麼能這樣做，當我按下按鈕的圖像會切換？

回答

相關問題