用html5写轮播图
时间: 2024-08-13 12:04:50 浏览: 44
在HTML5中创建轮播图,通常使用JavaScript库如`jQuery`、`Swiper.js`、`Slick` 或者是纯HTML5和CSS结合响应式设计的一些技巧。这里是一个简单的HTML5和CSS基础轮播图的示例,不依赖外部库:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.carousel {
width: 100%;
overflow: hidden;
}
.carousel-item {
float: left;
width: 33.33%; /* 如果有三张图片 */
transition: transform 0.6s ease;
}
.active {
transform: translateX(0);
}
.inactive {
transform: translateX(-100%);
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-item active" style="background-image: url('image1.jpg');">
<img src="image1.jpg" alt="Slide 1">
</div>
<div class="carousel-item inactive" style="background-image: url('image2.jpg');">
<img src="image2.jpg" alt="Slide 2">
</div>
<div class="carousel-item inactive" style="background-image: url('image3.jpg');">
<img src="image3.jpg" alt="Slide 3">
</div>
</div>
<script>
const carouselItems = document.querySelectorAll('.carousel-item');
let currentSlide = 0;
function nextSlide() {
carouselItems[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % carouselItems.length;
carouselItems[currentSlide].classList.add('active');
}
// 你可以添加按钮或定时器控制切换
// 例如每5秒自动切换
setInterval(nextSlide, 5000);
</script>
</body>
</html>
```
阅读全文