javascript - onclick() 改变图像不断重置

标签 javascript html css

我正在尝试创建一个基本的幻灯片放映,因此当您单击导航栏中的缩略图时,主图像会更改为该缩略图。我有一个 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>```

最佳答案

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

关于javascript - onclick() 改变图像不断重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56248089/

相关文章:

javascript - 解决 JavaScript 作用域问题的替代方法

html - 如何在数据库字段中存储区域

html - 在 div 中居中对象标签

html - css flexbox 3列布局,其中第一个是固定宽度

javascript - 元素在 div 之外的 JS-hover 副作用

javascript - 在 javascript 中创建一个提交按钮

javascript - 如何将 'db.query' 用于 DynamoDB 的 NodeJS AWS-SDK

html - 添加文本时,使 div 容器自动向左扩展宽度,而不是向右扩展

c# - 在 javascript 中创建 C# 对象

jquery - 如何将 Logo 放在 Bootstrap 导航栏中