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