循环定时器轮播五张不同的图片相关代码实现
时间: 2023-08-02 19:19:22 浏览: 42
以下是一个使用 JavaScript 实现循环定时器轮播五张不同图片的示例代码:
HTML 代码:
```html
<div class="slideshow-container">
<div class="slideshow-images">
<img src="img/image1.jpg" alt="Image 1">
<img src="img/image2.jpg" alt="Image 2">
<img src="img/image3.jpg" alt="Image 3">
<img src="img/image4.jpg" alt="Image 4">
<img src="img/image5.jpg" alt="Image 5">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
```
CSS 代码:
```css
.slideshow-container {
position: relative;
margin: auto;
width: 80%;
height: 400px;
}
.slideshow-images {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slideshow-images img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: bold;
padding: 10px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
user-select: none;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript 代码:
```js
const images = document.querySelectorAll('.slideshow-images img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;
// 定义切换图片的函数
function showImage(index) {
images.forEach(image => {
image.style.display = 'none';
});
images[index].style.display = 'block';
currentIndex = index;
}
// 切换到下一张图片
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
showImage(currentIndex);
}
// 切换到上一张图片
function prevImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
showImage(currentIndex);
}
// 定义定时器,每隔 3 秒切换一次图片
let timer = setInterval(nextImage, 3000);
// 当用户鼠标悬停在图片上时,暂停定时器
images.forEach(image => {
image.addEventListener('mouseover', () => {
clearInterval(timer);
});
});
// 当用户鼠标移开图片时,重新启动定时器
images.forEach(image => {
image.addEventListener('mouseout', () => {
timer = setInterval(nextImage, 3000);
});
});
// 当用户点击左右箭头时,切换到上一张或下一张图片
prevBtn.addEventListener('click', prevImage);
nextBtn.addEventListener('click', nextImage);
```
需要注意的是,上述代码中的图片路径和容器宽度、高度等样式需要根据实际情况进行调整。