关于html轮播图代码
时间: 2024-06-17 21:01:27 浏览: 96
HTML轮播图,也称为滑动图片展示或幻灯片,通常利用CSS和JavaScript(如jQuery库)来实现。下面是一个简单的HTML和JavaScript实现的轮播图示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.slider {
width: 100%;
position: relative;
}
.slider img {
width: 100%;
height: auto;
display: none;
transition: opacity 0.6s ease;
}
.slider img.active {
opacity: 1;
}
.slider .arrow {
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="Slide 1" class="active">
<img src="image2.jpg" alt="Slide 2">
<img src="image3.jpg" alt="Slide 3">
</div>
<a class="arrow prev" onclick="prevSlide()">❮</a>
<a class="arrow next" onclick="nextSlide()">❯</a>
<script>
let currentSlide = 0;
function prevSlide() {
if (currentSlide > 0) {
currentSlide--;
updateSlides();
}
}
function nextSlide() {
if (currentSlide < 2) {
currentSlide++;
updateSlides();
}
}
function updateSlides() {
const slides = document.querySelectorAll('.slider img');
slides[currentSlide].classList.add('active');
slides[currentSlide + 1].classList.remove('active');
}
</script>
</body>
</html>
```