onClick()更改图像,保持重置

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

我正在尝试创建基本幻灯片,因此当您单击导航中的缩略图时,主图像将更改为该图像。我有一个JS功能在我脑海中运行,当我点击一个缩略图时,该图像会在重置之前将主图像替换为几分之一秒。我真的很喜欢编码,所以我很感激任何帮助!

```    <head>
  <script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```

```<div class="container">
  <div class="row" id="mainContent">
    <div id="img-div">
        <img id="imageReplace" src='gem 4-3.jpg'>
    </div>
  </div>
</div>```

```<div id="side-nav">
        <ul class="nav-ul" id="style-1">
           <li class="nav-list">
            <a href="" onclick="changeImage('gem 4-3.jpg');">
                <img class="img-thumb" src="gem 4-3.jpg">
            </a> 
          </li>
          <li class="nav-list">
            <a href="" onclick="changeImage('gem 4-4.jpg');">
                <img class="img-thumb" src="gem 4-4.jpg">
            </a>
          </li>
        </ul>
</div>
<body>```
提问于
用户回答回答于

此问题正在发生,因为a标记必须在单击时重新加载页面。

这里有一个没有a标记的解决方案,或者如果您想让a标记签出preventDefault() on an <a> tag

      <script type="text/javascript">
          function changeImage(element) {
          document.getElementById('imageReplace').src = element;
      } </script>

      <div class="container">
        <div class="row" id="mainContent">
          <div id="img-div">
              <img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
          </div>
        </div>
      </div>
      <div id="side-nav">
              <ul class="nav-ul" id="style-1">
                <li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
                      <img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
                </li>
                <li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
                      <img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
                </li>
              </ul>
      </div>

用户回答回答于

从您的代码看,它看起来像您的缩略图和您应该要替换的图像是相同的。当您设置新的src时,您看到的只是一个闪烁,但是图像源是相同的。

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    7 粉丝1 提问9 回答
  • 四无君

    0 粉丝0 提问3 回答
  • 旺仔小小鹿

    社区 · 运营 (已认证)

    46 粉丝0 提问2 回答
  • 拉布拉多拉不多

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券