前言： css+JavaScript制作的轮播图，原理为将图片水平排列，隐藏多余图片，通过设置current的切换来显示对应的每一页达到轮播效果
效果图展示：
由背景图片、文字框和箭头图标组成。
前提介绍
BootCDN：BootCDN是我现在已知的在国内能用的开源项目最多的cdn
开源库：font-awesome矢量图标库
打开BootCDN网站，搜索font-awsome库，复制链接到html中
在这里插入图片描述
源码及解释如下：
页面结构制作（html）
<div class="bigbox">
<div class="slider">/*外层盒子*/
<div class="slide current">/*current为当前页*/
<div class="content">/*文字框*/
<h3>麦格·米勒娃</h3>
<h4>格兰芬多学院院长</h4>
<p>她是位公平的导师，对四个学院一视同仁，根斯内普教授不同，即便是自己
学院的学生触犯校规她也严惩不贷，即使最后丢掉学院杯，因此获得了全体
同学的尊敬，她在校长之位上也会将她公平的原则继续下去。
</p>
</div>
</div>
<div class="slide">
<div class="content ">
<h3>尼古拉斯·德·敏西·波平顿爵士</h3>
<h4>格兰芬多常驻幽灵</h4>
<p>头与脖子仅有一层皮肤相连，但并不可怕，很和蔼，也滑稽。经常将头拉下吓唬新生，
害怕血人巴罗，却又想胜过他。像许多幽灵一样，反感别人说他“身体里没有血液”、
“无法吃东西”等。喜欢人家叫他“敏西的尼古拉斯爵士”。
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h3>分院帽</h3>
<h4>创始人遗物</h4>
<p>分院帽是一顶磨得很旧，打着补丁，而且脏得要命的尖顶巫师帽，原本属于格兰芬多创始人
戈德里克·格兰芬多。在大礼堂全校师生面前进行，由分院帽(Sorting Hat)负责将学生分
到格兰芬多，赫奇帕奇，拉文克劳以及斯莱特林四个学院。
</p>
</div>
</div>
</div>
<div class="buttons">/*左右按钮*/
<button id="prev"><i class="fas fa-arrow-left"></i></button>/*向上切换的按钮，i为向左的箭头图标*/
<button id="next"><i class="fas fa-arrow-right"></i></button>/*向下切换的按钮，i为向右的箭头图标*/
</div>
<script src="main.js"></script>
</div>
实现css样式（css）
.bigbox{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;/*字体*/
background-color: rgb(245, 239, 239);
color: #fff;
line-height: 1.6;
height: 80vh;
}
.slider{
position: relative;/*父级相对定位*/
overflow: hidden;/*隐藏多余的水平图片*/
height: 100vh;
width: 70vw;
margin-left: 15%;
margin-right: 15%;
}
.slide{
position: absolute;/*设置绝对定位，让他们整个脱离文档*/
top: 0;
left: 0;
width: 100%;
height: 80%;
opacity: 0;/*隐藏*/
transition: opacity 0.4s ease-in-out;/*添加过度效果*/
}
.slide.current{
opacity: 1;/*只有current为可显示*/
}
/*插入背景图*/
.slide:first-child{
background: url(image/1.gif) no-repeat center
center/cover;
/*center:中心展示，不管你浏览器怎么缩放，都在浏览器窗口的中心区域展示。
cover:此时会保持图像的纵横比，并将图像缩放成将完全覆盖背景区域的最小尺寸。背景图像的一些部分可能不会显示在背景定位区域内。*/
}
.slide:nth-child(2){
background: url(image/2.jfif) no-repeat center
center/cover;
}
.slide:nth-child(3){
background: url(image/3.gif) no-repeat center
center/cover;
}
/*设置content文字框*/
.slide .content{
position: absolute;
bottom: 70px;
left: -400px;/*从左侧引入，所以为负*/
width: 33%;
opacity: 0;/*和图片同理，只有在对应current页面时opacity为1，可见*/
background-color: rgba(255, 255, 255, 0.8);
color: #333;
padding: 15px;
}
.slide .content h3{
margin-bottom: 10px;
}
.slide.current .content{
opacity: 1;/*只有current 的文本框才可见*/
transform: translateX(400px);/*水平平移*/
transition: all 0.7s ease-in-out 0.3s;/*设置过度效果：过度时间、速度曲线、延时*/
}
/*定位按钮*/
.buttons button#prev{
position: relative;
top: -65vh;
left: 15vw;
}
.buttons button#next{
position: relative;
top: -65vh;
right: -77.5vw;
}
.buttons button{
border: 2px solid #fff;/*设置箭头外圆边框*/
background-color: transparent;
color: #fff;
cursor: pointer;/*移入鼠标变手*/
padding: 13px 15px;
border-radius: 50%;
outline: none;/*去除外边框线*/
}
.buttons button:hover{
/*设置移入时hover样式：改变背景色，箭头变黑*/
background-color: #fff;
color: #333;
}
设置current的切换，达到轮播效果（JavaScript）
const slides =document.querySelectorAll('.slide');/*获取文档节点*/
//获取按钮
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
//设置下一页函数
const nextSlide = function(){
//获取current类
const current = document.querySelector('.current');
//判断点击下一个切换按钮时，他是当前页的兄弟元素，就给他添加一个current的类
if(current.nextElementSibling){
//给下一个兄弟元素添加current
current.nextElementSibling.classList.add('current');
}else{
//到达尾页时，应该回于开头页，所以把current添加到开头
//给最开始元素添加current
slides[0].classList.add('current');
}
//清除自身current的类，确保不重复
setTimeout(()=>current.classList.remove('current'));
};
//设置上一页函数，可上一个函数为同理
const prevSlide = function(){
//获取current类
const current = document.querySelector('.current');
//同上一个函数
if(current.previousElementSibling){
//给上一个兄弟元素添加current
current.previousElementSibling.classList.add('current');
}else{
//到达开头时，应该回于尾页，所以给末尾添加current
slides[slides.length-1].classList.add('current');
}
//清除自身current的类，确保不重复
setTimeout(()=>current.classList.remove('current'));
};
//给按钮绑定点击事件，将函数放置进去3
next.addEventListener('click' , function(){
nextSlide()
});
prev.addEventListener('click' , function(){
prevSlide()
});
声明：部分资料源自网络，如有侵权，请联系我删除！
文中如存在谬误、混淆等不足，欢迎批评指正！