使用js+html+css写一个轮播图
时间: 2024-01-16 19:03:23 浏览: 27
好的,以下是一个简单的轮播图的实现:
HTML代码:
```html
<div class="slider">
<div class="slides">
<img src="image1.jpg" alt="image1" />
<img src="image2.jpg" alt="image2" />
<img src="image3.jpg" alt="image3" />
</div>
<a class="prev" onclick="previousSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
```
CSS代码:
```css
.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slides {
display: flex;
width: 100%;
height: 100%;
}
.slides img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
font-size: 30px;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript代码:
```javascript
const slides = document.querySelector('.slides');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
let slideIndex = 0;
// 显示当前幻灯片
function showSlide() {
const slideWidth = slides.children[0].offsetWidth;
slides.style.transform = `translateX(-${slideWidth * slideIndex}px)`;
}
// 下一张幻灯片
function nextSlide() {
slideIndex++;
if (slideIndex >= slides.children.length) {
slideIndex = 0;
}
showSlide();
}
// 上一张幻灯片
function previousSlide() {
slideIndex--;
if (slideIndex < 0) {
slideIndex = slides.children.length - 1;
}
showSlide();
}
// 自动播放幻灯片
setInterval(() => {
nextSlide();
}, 5000);
// 初始显示第一张幻灯片
showSlide();
```
通过以上代码,我们实现了一个简单的基于 JavaScript、HTML 和 CSS 的轮播图。