web前端完成轮播图代码
时间: 2024-07-16 09:00:30 浏览: 60
web前端自动滚动且点击切换轮播图代码
5星 · 资源好评率100%
Web前端实现轮播图通常使用JavaScript库,如Swiper、Slick、Owl Carousel等,或者使用HTML5的CSS3动画结合JavaScript编写自定义代码。这里简单介绍一种常见的基于jQuery和CSS实现的基本轮播图示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Carousel</title>
<style>
.carousel {
width: 100%;
overflow: hidden;
}
.carousel-item {
float: left;
transition: opacity 0.6s ease;
}
.carousel-item.active {
opacity: 1;
}
.carousel-item:not(.active) {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-item active">
<img src="image1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Slide 3">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var index = 0;
function slideShow() {
$('.carousel-item').eq(index).addClass('active').siblings().removeClass('active');
index = (index + 1) % $('.carousel-item').length; // 循环显示
setTimeout(slideShow, 3000); // 每隔3秒切换到下一张
}
slideShow(); // 开始轮播
});
</script>
</body>
</html>
```
阅读全文