onclick()更改图像保持重置
onclick()更改图像保持重置
提问于 2019-05-22 09:11:03
我正在尝试创建一个基本的幻灯片，这样当你点击导航中的缩略图时，主图像就会变成那个缩略图。我有一个JS函数在我的脑海中运行，当我点击一个缩略图时，该图像在重置之前会替换主图像一小部分时间。我真的是个编程新手，所以如果能给我任何帮助我会很感激！
``` <head>函数元素(ChangeImage){
document.getElementById('imageReplace').src =元素；
}
<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>回答 2
Stack Overflow用户
发布于 2019-05-22 09:20:23
从你的代码看，你的缩略图和你想要替换的图片是一样的。当您设置新的src时，您看到的只是闪烁，但图像源是相同的。
Stack Overflow用户
发布于 2019-05-22 09:21:14
发生此问题是因为标签必须在单击时重新加载页面。
下面是一个没有a标记的解决方案，或者如果您想将a标记保留在check out preventDefault() on an 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56248089
复制相关文章
相似问题