使用CSS按鈕切換影像-有解無憂

這可能是非常基本的東西，但是當我嘗試尋找答案時，我一直在尋找什么。希望這無論如何都不是重復的。

我不一定要制作幻燈片。我想要一些可以在影像之間切換的按鈕，而沒有滑動影片。關鍵是能夠在角色設計的幾個不同參考影像之間切換。

我將包括與此相關的代碼部分，作為替代，只是為了獲得正確的外觀/感覺。它將給出我正在尋找的設計方面的想法，但絕不是功能性的。它目前也沒有任何影像。

* {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  font-size: 16px;
}

.content {
  position: absolute;
  width: 950px;
  left: 50%;
  margin-left: -475px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 50px 500px 1.5fr;
  grid-template-rows: auto auto;
  gap: 2px;
  background-color: mediumorchid;
  grid-auto-flow: row;
  grid-template-areas: "buttons design extras" "relationships relationships relationships"
}

.bottom-grid>div {
  margin: 3px;
}

.buttons {
  grid-area: buttons;
  padding: 5px;
  background-color: paleturquoise;
}

.design {
  grid-area: design;
  padding: 5px;
  background-color: paleturquoise;
}

.extras {
  grid-area: extras;
  padding: 5px;
  background-color: paleturquoise;
}

.relationships {
  grid-area: relationships;
  padding: 5px;
  background-color: paleturquoise;
}

.btn-group .butt {
  background-color: coral;
  display: block;
  border-radius: 50%;
  border: 1px solid;
  padding: 5px;
  margin-top: 5px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  width: 35px;
}

.btn-group .butt:hover {
  background-color: firebrick;
}

<!DOCTYPE html>
<html>

<head>
  <title>buttons</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>

<body>
  <div class="content">
    <div class="bottom-grid">
      <div class="buttons">
        <div class="btn-group">
          <div class="butt">b1</div>
          <div class="butt">b2</div>
          <div class="butt">b3</div>
          <div class="butt">b4</div>
        </div>
      </div>
      <div class="design">design</div>
      <div class="extras">extras</div>
      <div class="relationships">relationships</div>
    </div>
  </div>
</body>

</html>

暫時我沒有這方面的 JS，但我在其他地方使用過它作為頁面，所以我在這里使用它很好。我還沒有接觸過 JQuery。

實作我想要的最好方法是什么？

uj5u.com熱心網友回復：

將其添加到div 中。

<img id="imageSlot" src="" alt="" />

然后，添加這個腳本：

<script>
  const imageSlot = document.getElementById('imageSlot');
  const buttons = document.querySelectorAll('.butt');

  const images = [
    { id: 'b1', url: 'https://picsum.photos/200/200?random=1' },
    { id: 'b2', url: 'https://picsum.photos/200/200?random=2' },
    { id: 'b3', url: 'https://picsum.photos/200/200?random=3' },
    { id: 'b4', url: 'https://picsum.photos/200/200?random=4' },
  ];

  buttons.forEach((button) => {
    button.addEventListener('click', changeImage);
  });

  function changeImage(e) {
    const target = e.target.textContent;
    imageSlot.src = images.find((img) => img.id === target).url;
  }
</script>

用您的圖片鏈接替換所有網址：

{ id: 'b1', url: 'https://picsum.photos/200/200?random=1' }

嘗試使用 Codepen.io

uj5u.com熱心網友回復：

要重用它，您需要通過更改按鈕 id 和適當添加或洗掉 javascript if 陳述句來進行一些調整

Codepn 示例

<!DOCTYPE html>
<html>

<head>
  <title>buttons</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <style>
  * {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  font-size: 16px;
}

.content {
  position: absolute;
  width: 950px;
  left: 50%;
  margin-left: -475px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 50px 500px 1.5fr;
  grid-template-rows: auto auto;
  gap: 2px;
  background-color: mediumorchid;
  grid-auto-flow: row;
  grid-template-areas: "buttons design extras" "relationships relationships relationships"
}

.bottom-grid>div {
  margin: 3px;
}

.buttons {
  grid-area: buttons;
  padding: 5px;
  background-color: paleturquoise;
}

.design {
  grid-area: design;
  padding: 5px;
  background-color: paleturquoise;
}

.extras {
  grid-area: extras;
  padding: 5px;
  background-color: paleturquoise;
}

.relationships {
  grid-area: relationships;
  padding: 5px;
  background-color: paleturquoise;
}

.btn-group .butt {
  background-color: coral;
  display: block;
  border-radius: 50%;
  border: 1px solid;
  padding: 5px;
  margin-top: 5px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  width: 35px;
}

.btn-group .butt:hover {
  background-color: firebrick;
}
  </style>
</head>

<body>
  <div class="content">
    <div class="bottom-grid">
      <div class="buttons">
        <div class="btn-group">
          <div class="butt" id="b1" onclick="changeImage(this.id,'https://picsum.photos/id/1/200')">b1</div>
          <div class="butt" id="b2" onclick="changeImage(this.id,'https://picsum.photos/id/2/200')">b2</div>
          <div class="butt" id="b3" onclick="changeImage(this.id,'https://picsum.photos/id/3/200')">b3</div>
          <div class="butt" id="b4" onclick="changeImage(this.id,'https://picsum.photos/id/4/200')">b4</div>
        </div>
      </div>
      <div class="design">design<br>
      <img alt="" src="" id="imageBox" />
      <p id="messageBox"> </p>
      </div>
      <div class="extras">extras</div>
      <div class="relationships">relationships</div>
    </div>
  </div>

<script language="javascript">
    function changeImage(buttonID,imageLink) {

        if (buttonID == "b1") {
            document.getElementById("imageBox").src = imageLink;
        } else if (buttonID == "b2") {
            document.getElementById("imageBox").src = imageLink;
        } else if (buttonID == "b3") {
            document.getElementById("imageBox").src = imageLink;
        } else if (buttonID == "b4") {
            document.getElementById("imageBox").src = imageLink;
        } 
    }
</script>

</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398099.html

標籤：javascript html css

上一篇：具有最大高度的父級中的垂直div

下一篇：如何識別和比較在網格JS上單擊了哪個單元格？