<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图示例</title>
<style>
/* 基本样式 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
/* 轮播图容器 */
.carousel {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* 图片容器 */
.carousel-images {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
/* 图片样式 */
.carousel-images img {
width: 100%;
height: 100%;
object-fit: cover;
flex-shrink: 0;
}
/* 左右按钮 */
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.carousel-button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 左按钮 */
.carousel-button.prev {
left: 10px;
}
/* 右按钮 */
.carousel-button.next {
right: 10px;
}
/* 指示器容器 */
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
}
/* 指示器样式 */
.carousel-indicators span {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.carousel-indicators span.active {
background-color: white;
}
</style>
</head>
<body>
<!-- 轮播图容器 -->
<div class="carousel">
<!-- 图片容器 -->
<div class="carousel-images">
<img src="https://image.meiye.art/pic_1631411429199mjIE7yxqjZxWNdOvWLxL2?imageMogr2/thumbnail/640x/interlace/1" alt="Image 1">
<img src="https://image.meiye.art/pic_16324946992753vSLEv0P2s-1PY95ynOZn?imageMogr2/thumbnail/640x/interlace/1" alt="Image 2">
<img src="https://image.meiye.art/pic_1628403749737?imageMogr2/thumbnail/640x/interlace/1" alt="Image 3">
</div>
<!-- 左右按钮 -->
<button class="carousel-button prev"><</button>
<button class="carousel-button next">></button>
<!-- 指示器 -->
<div class="carousel-indicators">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
// 获取元素
const carouselImages = document.querySelector('.carousel-images');
const prevButton = document.querySelector('.carousel-button.prev');
const nextButton = document.querySelector('.carousel-button.next');
const indicators = document.querySelectorAll('.carousel-indicators span');
let currentIndex = 0; // 当前显示的图片索引
const totalImages = carouselImages.children.length; // 图片总数
// 更新指示器状态
function updateIndicators() {
indicators.forEach((indicator, index) => {
indicator.classList.toggle('active', index === currentIndex);
});
}
// 切换到指定图片
function goToImage(index) {
if (index < 0) {
index = totalImages - 1; // 如果小于0，切换到最后一张
} else if (index >= totalImages) {
index = 0; // 如果超出范围，切换到第一张
}
currentIndex = index;
carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;
updateIndicators();
}
// 切换到上一张图片
prevButton.addEventListener('click', () => {
goToImage(currentIndex - 1);
});
// 切换到下一张图片
nextButton.addEventListener('click', () => {
goToImage(currentIndex + 1);
});
// 点击指示器切换图片
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
goToImage(index);
});
});
// 自动播放
let autoPlayInterval = setInterval(() => {
goToImage(currentIndex + 1);
}, 3000);
// 鼠标悬停时停止自动播放
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseenter', () => {
clearInterval(autoPlayInterval);
});
// 鼠标离开时恢复自动播放
carousel.addEventListener('mouseleave', () => {
autoPlayInterval = setInterval(() => {
goToImage(currentIndex + 1);
}, 3000);
});
</script>
</body>
</html>
