5张图片,点击图片依次切换,到最后一张图片后切换回第一张.
时间: 2023-07-16 17:15:19 浏览: 96
图片切换,多个图片之间来回切换
4星 · 用户满意度95%
可以使用JavaScript来实现这个功能,以下是一个简单的实现示例:
HTML代码:
```html
<div>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
```
JavaScript代码:
```javascript
var images = document.getElementsByTagName('img'); // 获取所有图片元素
var currentIndex = 0; // 当前显示的图片索引
// 隐藏除了当前图片以外的所有图片
function hideImages() {
for (var i = 0; i < images.length; i++) {
if (i !== currentIndex) {
images[i].style.display = 'none';
}
}
}
// 切换到下一张图片
function nextImage() {
currentIndex++; // 索引加1
if (currentIndex >= images.length) {
currentIndex = 0; // 如果已经是最后一张图片,回到第一张
}
hideImages(); // 隐藏除了当前图片以外的所有图片
images[currentIndex].style.display = 'block'; // 显示当前图片
}
// 初始化,显示第一张图片,启动定时器
hideImages();
images[currentIndex].style.display = 'block';
setInterval(nextImage, 3000); // 每3秒切换一次图片
```
这段代码会在页面加载完成后自动开始轮播,每隔3秒自动切换到下一张图片,到最后一张图片后会回到第一张图片重新开始。你只需要将图片的路径修改为你自己的图片路径即可。
阅读全文