You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
5.0 KiB
156 lines
5.0 KiB
2 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Image Carousel</title>
|
||
|
|
<style>
|
||
|
|
.carousel {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
height: 60%;
|
||
|
|
width: 60%;
|
||
|
|
top: 20%;
|
||
|
|
left: 20%;
|
||
|
|
border-radius: 10px;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carousel img {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
transition: opacity 1s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carousel-dots {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carousel-dot {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #efc6b0;
|
||
|
|
margin: 0 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carousel-dot.active {
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#prev-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
z-index: 999;
|
||
|
|
left: 10%;
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
#next-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: 10%;
|
||
|
|
z-index: 999;
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="carousel-controls">
|
||
|
|
<button id="prev-btn" onclick="prevImage()">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor"
|
||
|
|
class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
|
||
|
|
<path fill-rule="evenodd"
|
||
|
|
d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div class="carousel">
|
||
|
|
<img id="img1" src="image1.jpg" alt="Image 1">
|
||
|
|
<img id="img2" src="image2.jpg" alt="Image 2">
|
||
|
|
<img id="img3" src="image3.jpg" alt="Image 3">
|
||
|
|
</div>
|
||
|
|
<button id="next-btn" onclick="nextImage()">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor"
|
||
|
|
class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
|
||
|
|
<path fill-rule="evenodd"
|
||
|
|
d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="carousel-dots">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// 图片数组
|
||
|
|
var images = [
|
||
|
|
{ src: "image1.jpg", title: "Image 1" },
|
||
|
|
{ src: "image2.jpg", title: "Image 2" },
|
||
|
|
{ src: "image3.jpg", title: "Image 3" }
|
||
|
|
];
|
||
|
|
var currentImageIndex = 0;
|
||
|
|
|
||
|
|
// 轮播函数
|
||
|
|
function carousel() {
|
||
|
|
document.getElementById("img" + (currentImageIndex + 1)).style.opacity = "0";
|
||
|
|
currentImageIndex = (currentImageIndex + 1) % images.length;
|
||
|
|
document.getElementById("img" + (currentImageIndex + 1)).style.opacity = "1";
|
||
|
|
updateDots();
|
||
|
|
setTimeout(carousel, 2000);
|
||
|
|
}
|
||
|
|
// 初始化圆点
|
||
|
|
function initDots() {
|
||
|
|
var dotsContainer = document.querySelector(".carousel-dots");
|
||
|
|
images.forEach(function (_, index) {
|
||
|
|
var dot = document.createElement("div");
|
||
|
|
dot.classList.add("carousel-dot");
|
||
|
|
dot.addEventListener("click", function () {
|
||
|
|
showImageAtIndex(index);
|
||
|
|
});
|
||
|
|
dotsContainer.appendChild(dot);
|
||
|
|
});
|
||
|
|
updateDots();
|
||
|
|
}
|
||
|
|
// 更新圆点状态
|
||
|
|
function updateDots() {
|
||
|
|
var dots = document.querySelectorAll(".carousel-dot");
|
||
|
|
dots.forEach(function (dot, index) {
|
||
|
|
dot.classList.toggle("active", index === currentImageIndex);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function showImageAtIndex(index) {
|
||
|
|
if (index < 0 || index >= images.length) return;
|
||
|
|
currentImageIndex = index;
|
||
|
|
carousel();
|
||
|
|
}
|
||
|
|
|
||
|
|
function prevImage() {
|
||
|
|
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
|
||
|
|
carousel();
|
||
|
|
}
|
||
|
|
|
||
|
|
function nextImage() {
|
||
|
|
currentImageIndex = (currentImageIndex + 1) % images.length;
|
||
|
|
carousel();
|
||
|
|
}
|
||
|
|
carousel();
|
||
|
|
initDots();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|