前端 1. 有一个"改变"按钮, 和显示图片的标签, 点击"改变",每次切换一张图片(有多张图) 提示: 图片需要用数组进行存储
时间: 2023-08-11 11:05:06 浏览: 113
好的,你的问题是关于前端页面中如何实现一个切换多张图片的功能。下面是一种简单的实现方式:
1. 在页面上放置一个img标签,用于显示图片。
2. 在页面上放置一个button按钮,用于触发切换图片的事件。
3. 在JavaScript中定义一个数组,用于存储多张图片的路径。
4. 在button的click事件中,通过数组和计数器实现每次切换一张图片的逻辑。
示例代码:
HTML部分:
```html
<img id="myImg" src="" />
<button id="changeBtn">改变</button>
```
JS部分:
```javascript
// 图片路径数组
var imgArr = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
// 当前图片的索引
var currentIndex = 0;
// 获取img元素
var imgElement = document.getElementById('myImg');
// 获取button元素
var btnElement = document.getElementById('changeBtn');
// 给button绑定click事件
btnElement.addEventListener('click', function() {
// 判断当前图片是否是最后一张
if(currentIndex === imgArr.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
// 切换图片
imgElement.src = imgArr[currentIndex];
});
```
这样,每次点击"改变"按钮,就会切换到下一张图片。当当前图片是最后一张时,切换到第一张图片。
阅读全文