parent
4c66e9cda7
commit
55a709f09a
@ -0,0 +1,156 @@
|
||||
<!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>
|
||||
Loading…
Reference in new issue