轮播图代码,自动切换和手动切换都要有,5张图片,一秒切换一张
时间: 2024-10-09 09:08:18 浏览: 12
为了创建一个包含5张图片的轮播图,既能自动切换,又能手动切换,你可以使用HTML、CSS和JavaScript来实现。以下是一个基本的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s;
opacity: 0;
}
.active-slide {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img class="slide active-slide" src="image1.jpg">
<img class="slide" src="image2.jpg">
<img class="slide" src="image3.jpg">
<img class="slide" src="image4.jpg">
<img class="slide" src="image5.jpg">
</div>
<button onclick="prevSlide()">上一张</button>
<button onclick="nextSlide()">下一张</button>
<script>
let slideIndex = 0;
const slides = document.querySelectorAll('.slide');
const buttons = document.querySelectorAll('button');
function showSlides(index) {
let i;
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('active-slide');
}
slides[index].classList.add('active-slide');
slideIndex = index;
}
function prevSlide() {
if (slideIndex > 0) {
showSlides(slideIndex - 1);
}
}
function nextSlide() {
if (slideIndex < slides.length - 1) {
showSlides(slideIndex + 1);
}
}
// 自动切换
setInterval(() => {
nextSlide();
}, 1000); // 每隔1秒切换
showSlides(0); // 初始加载第一张图片
</script>
</body>
</html>
```
在这个例子中,我们首先设置了轮播图的基本样式,然后用JavaScript处理点击按钮和定时切换图片。`showSlides()`函数负责隐藏当前图片并显示新的图片,同时更新索引。自动切换部分使用`setInterval`每秒调用`nextSlide()`。