前端 有一个"改变"按钮, 和显示图片的标签, 点击"改变",每次切换一张图片(有多张图) 提示: 图片需要用数组进行存储
时间: 2023-08-11 12:05:06 浏览: 161
好的,这是一个前端页面的需求,需要一个 "改变" 按钮和一个显示图片的标签,并且点击 "改变" 按钮后可以切换多张图片。可以按照以下步骤来实现:
1. 在 HTML 页面中定义一个按钮和一个图片标签:
```html
<button id="changeBtn">改变</button>
<img id="imageTag" src="" alt="">
```
2. 在 JavaScript 中定义一个数组来存储多张图片的路径:
```javascript
var images = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg"
];
```
3. 在 JavaScript 中定义一个变量来记录当前显示的图片索引:
```javascript
var currentIndex = 0;
```
4. 在 JavaScript 中为按钮添加点击事件,每次点击后更新图片路径和当前索引:
```javascript
var changeBtn = document.getElementById("changeBtn");
var imageTag = document.getElementById("imageTag");
changeBtn.addEventListener("click", function() {
currentIndex = (currentIndex + 1) % images.length;
imageTag.src = images[currentIndex];
});
```
5. 最后,需要初始化图片路径和索引:
```javascript
imageTag.src = images[currentIndex];
```
这样就可以实现每次点击按钮后切换一张图片的功能了。
阅读全文