html轮播图怎么加
时间: 2023-12-25 18:28:25 浏览: 25
以下是制作HTML轮播图的步骤和代码示例:
1. HTML结构
```html
<div class="slider">
<div class="slider-wrapper">
<img src="img1.jpg" alt="image1">
<img src="img2.jpg" alt="image2">
<img src="img3.jpg" alt="image3">
</div>
</div>
```
2. CSS样式
```css
.slider {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;}
.slider-wrapper {
width: 300%;
height: 100%;
position: relative;
left: 0;
transition: left 1s ease-in-out;
}
.slider-wrapper img {
width: 33.333%;
height: 100%;
float: left;
}
```
3. JavaScript代码
```javascript
var sliderWrapper = document.querySelector('.slider-wrapper');
var images = document.querySelectorAll('.slider-wrapper img');
var imageWidth = images[0].clientWidth;
var currentImage = 0;
function slide() {
currentImage++;
if (currentImage >= images.length) {
currentImage = 0;
}
sliderWrapper.style.left = -currentImage * imageWidth + 'px';
}
setInterval(slide, 3000);
```
以上代码实现了一个简单的HTML轮播图,每隔3秒钟自动切换一张图片。你可以根据需要修改图片数量、切换时间等参数。