前端,完成图片切换
时间: 2023-07-02 22:23:33 浏览: 63
可以使用JavaScript实现图片的切换,以下是一个简单的例子:
HTML代码:
```
<div>
<img id="image" src="img1.jpg">
<br>
<button onclick="previous()">上一张</button>
<button onclick="next()">下一张</button>
</div>
```
JavaScript代码:
```
var index = 1; // 当前显示图片的索引
var images = ["img1.jpg", "img2.jpg", "img3.jpg"]; // 图片的路径数组
// 切换到上一张图片
function previous() {
index--;
if (index < 0) {
index = images.length - 1;
}
var img = document.getElementById("image");
img.src = images[index];
}
// 切换到下一张图片
function next() {
index++;
if (index >= images.length) {
index = 0;
}
var img = document.getElementById("image");
img.src = images[index];
}
```
这段代码中,我们通过一个索引变量`index`来表示当前显示的图片,同时定义了一个图片路径数组`images`,其中包含了所有需要切换的图片路径。`previous()`和`next()`函数分别用于切换到上一张和下一张图片,它们通过修改`index`变量的值来实现图片的切换,并将当前显示的图片路径赋值给`img`元素的`src`属性。在HTML代码中,我们通过`onclick`属性将这两个函数绑定到两个按钮上,以便用户点击按钮时触发图片切换。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)