Question

我希望画廊页面工作的方式是，当按下按钮时，图像将图片放到中间并使其成为相同的CSS（大小和白色阴影），然后其他图像将与其他CSS（较小的黑色阴影）

HTML code：

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

}

Answer 1

您将不得不对JavaScript进行一些研究，这里有一些主题可以帮助您。对于像这样的东西，使用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/

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

3 个答案: