Question

我正在尝试创建基本的幻灯片演示，因此当您单击导航中的缩略图时，主图像将变为该幻灯片。我的头部运行着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>```

Answer 1

从您的代码看来，您的缩略图和应该替换的图像是相同的。设置新的src时，您看到的只是闪烁，但是图像源是相同的。

Answer 2

发生此问题是因为标签必须在点击时重新加载页面。

这是不带标签的解决方案，或者如果您想让标签保留签出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>

onclick（）更改图像不断重置

2 个答案: