基于网站轮播图网页代码
时间: 2023-11-29 08:06:56 浏览: 29
好的,以下是一个基于HTML、CSS和JavaScript的简单网站轮播图网页代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider">
<div class="slides">
<div class="slide"><img src="slide1.jpg"></div>
<div class="slide"><img src="slide2.jpg"></div>
<div class="slide"><img src="slide3.jpg"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slides {
display: flex;
width: 300%;
}
.slide {
width: 33.33%;
transition: transform 0.5s ease-in-out;
}
.slide img {
width: 100%;
height: 400px;
object-fit: cover;
}
```
JavaScript代码:
```javascript
const slides = document.querySelectorAll('.slide');
const slider = document.querySelector('.slides');
let currentSlide = 0;
const slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
slider.style.transform = `translateX(-${currentSlide}00%)`;
}
slider.addEventListener('mouseover', () => {
clearInterval(slideInterval);
});
slider.addEventListener('mouseout', () => {
slideInterval = setInterval(nextSlide, 3000);
});
```
这个网页代码实现了一个简单的轮播图,包括三张图片的轮播和自动播放功能。你可以根据需要修改图片和样式,并添加其他功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)