|
|
|
|
|
<!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>
|
|
|
|
|
|
.pics img {
|
|
|
|
|
|
width: 600px;
|
|
|
|
|
|
height: 400px;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pics img.active {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button.prev,
|
|
|
|
|
|
button.next {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button.prev {
|
|
|
|
|
|
left: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button.next {
|
|
|
|
|
|
right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dots span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 10px;
|
|
|
|
|
|
height: 10px;
|
|
|
|
|
|
margin: 5px;
|
|
|
|
|
|
background-color: gray;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dots span.active {
|
|
|
|
|
|
background-color: black;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="pics"></div>
|
|
|
|
|
|
<button class="prev">‹</button>
|
|
|
|
|
|
<button class="next">›</button>
|
|
|
|
|
|
<div class="dots"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
let imgs = [
|
|
|
|
|
|
{ src: "pic/1.png" },
|
|
|
|
|
|
{ src: "pic/2.jpg" },
|
|
|
|
|
|
{ src: "pic/3.jpg" },
|
|
|
|
|
|
{ src: "pic/4.jpg" },
|
|
|
|
|
|
{ src: "pic/5.png" },
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
const picsContainer = document.querySelector('.pics');
|
|
|
|
|
|
const prevButton = document.querySelector('.prev');
|
|
|
|
|
|
const nextButton = document.querySelector('.next');
|
|
|
|
|
|
const dotsContainer = document.querySelector('.dots');
|
|
|
|
|
|
|
|
|
|
|
|
imgs.forEach(imgObj => {
|
|
|
|
|
|
const img = document.createElement('img');
|
|
|
|
|
|
img.src = imgObj.src;
|
|
|
|
|
|
picsContainer.appendChild(img);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const images = document.querySelectorAll('.pics img');
|
|
|
|
|
|
let i = 0;
|
|
|
|
|
|
|
|
|
|
|
|
imgs.forEach((_, index) => {
|
|
|
|
|
|
const dot = document.createElement('span');
|
|
|
|
|
|
dot.dataset.index = index;
|
|
|
|
|
|
dotsContainer.appendChild(dot);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const dots = document.querySelectorAll('.dots span');
|
|
|
|
|
|
|
|
|
|
|
|
function updatePics() {
|
|
|
|
|
|
images.forEach((img, index) => {
|
|
|
|
|
|
img.classList.toggle('active', index === i);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
dots.forEach(dot => {
|
|
|
|
|
|
dot.classList.toggle('active', dot.dataset.index === i);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function nextImage() {
|
|
|
|
|
|
i = (i + 1) % images.length;
|
|
|
|
|
|
updatePics();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function prevImage() {
|
|
|
|
|
|
i = (i - 1 + images.length) % images.length;
|
|
|
|
|
|
updatePics();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
prevButton.addEventListener('click', prevImage);
|
|
|
|
|
|
nextButton.addEventListener('click', nextImage);
|
|
|
|
|
|
|
|
|
|
|
|
dots.forEach(dot => {
|
|
|
|
|
|
dot.addEventListener('click', () => {
|
|
|
|
|
|
i = parseInt(dot.dataset.index);
|
|
|
|
|
|
updatePics();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
images[0].classList.add('active');
|
|
|
|
|
|
dots[0].classList.add('active');
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
