图片轮播是一种常见的网页设计元素,用于展示一系列图片,并在一定时间间隔内自动或手动切换图片。使用JavaScript实现图片轮播可以增强用户体验,使网站更加动态和吸引人。
图片轮播通常包括以下几个部分:
以下是一个简单的图片轮播实现:
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="carousel">
<div class="carousel-inner">
<img src="image1.jpg" alt="Image 1" class="active">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
<div class="indicators">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.carousel {
position: relative;
width: 80%;
margin: auto;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner img {
position: absolute;
width: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel-inner img.active {
opacity: 1;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.indicators {
text-align: center;
margin-top: 10px;
}
.indicators span {
display: inline-block;
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.indicators span.active {
background-color: rgba(0, 0, 0, 1);
}
const images = document.querySelectorAll('.carousel-inner img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const indicators = document.querySelectorAll('.indicators span');
let currentIndex = 0;
let timer;
function showImage(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
indicators[i].classList.toggle('active', i === index);
});
currentIndex = index;
}
function nextImage() {
let index = (currentIndex + 1) % images.length;
showImage(index);
}
function prevImage() {
let index = (currentIndex - 1 + images.length) % images.length;
showImage(index);
}
prevBtn.addEventListener('click', () => {
clearInterval(timer);
prevImage();
startTimer();
});
nextBtn.addEventListener('click', () => {
clearInterval(timer);
nextImage();
startTimer();
});
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
clearInterval(timer);
showImage(index);
startTimer();
});
});
function startTimer() {
timer = setInterval(nextImage, 3000);
}
startTimer();
通过以上代码和解释,你可以实现一个简单的图片轮播功能,并根据需要进行扩展和定制。
没有搜到相关的文章