写一个完整的轮播图页面
时间: 2023-02-11 17:51:56 浏览: 63
轮播图页面的完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>轮播图页面</title>
<style>
/* 设置图片容器的样式 */
.slider {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
}
/* 设置图片的样式 */
.slider img {
width: 100%;
height: 100%;
position: absolute;
}
/* 设置按钮的样式 */
.slider button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 36px;
background-color: transparent;
border: none;
color: white;
cursor: pointer;
}
/* 设置左按钮的样式 */
.slider .prev {
left: 10px;
}
/* 设置右按钮的样式 */
.slider .next {
right: 10px;
}
/* 设置分页器的样式 */
.slider .dots {
display: flex;
justify-content: center;
position: absolute;
bottom: 10px;
width: 100%;
}
/* 设置圆点的样式 */
.slider .dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
margin: 0 10px;
cursor: pointer;
}
/* 设置当前圆点的样式 */
.slider .dots .active {
background-color: gray;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<button class="prev"><</button>
<button class="next">></button>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
// 获取元素
var slider = document.querySelector(".slider");
var imgs = document.querySelectorAll(".slider img");
var prev = document.querySelector(".slider .prev");
var next = document.querySelector(".
相关推荐
![](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)
![](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)