javascript - 通过单击按钮在 javascript 中更改 img src
问题描述
这是我的代码:我想通过单击按钮更改 img src 并将一个添加到再次更改下一张照片的计数器但只显示第一张照片!我在这个路径中有 8 个 img:images/slides/writing${0-7};
slider = () =>{
let i=0;
let slides = document.getElementById('slides').getElementsByTagName('img')[0];
slides.src = `images/slides/writing${i}.jpg` ;
i++
}
<section id="slides">
<picture>
<img src="" alt="Slide img">
<input type="button" value="change" onclick="slider()">
</picture>
</section>
解决方案
您始终i
在函数内部设置为 0,只需将其设为全局并确保它不超过7
:
let i=0;
slider = () =>{
if(i==8) i=0;
let slides = document.getElementById('slides').getElementsByTagName('img')[0];
slides.src = `images/slides/writing${i}.jpg` ;
i++
}
推荐阅读
- mysql - 如何在 pd.read_sql_query 中一次执行多个 SQL 命令?
- python - 如何使用 Python 的 pandas 基于 DateTimeStamp 列生成时间跨度列?
- javascript - 日期选择器不会扩展父 div 组件
- c# - 使用correlationId安慰主题订阅
- php - 如何限制发布数据的长度
- c++ - 为什么 std::scoped_lock 的不同互斥顺序会影响性能?
- json - 我在primefaces jsf中的inputTextarea的正则表达式
- c#-4.0 - JsonConvert.DeserializeObject(对象)
- c++ - FileNodeIterator opencv c++
- java - 终端上intellij IDEA上的jshell问题