Foreword: The carousel diagram made by css+JavaScript, the principle is to arrange the pictures horizontally, hide the extra pictures, and display the corresponding page by setting the current switch to achieve the carousel effect
Effect picture display: It is
composed of background picture, text box and arrow icon.
Prerequisite introduction
BootCDN : BootCDN is the CDN with the most open source projects that I know that can be used in China
开源库: font-awesome vector icon library
Open the BootCDN website, search the font-awsome library, copy the link to the html,
insert the picture description here
The source code and explanation are as follows:
page structure production (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>
Implement css style (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;
}
Set the current switch to achieve the carousel effect (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()
});
Disclaimer: Part of the information comes from the Internet, if there is any infringement, please contact me to delete it!
If there are errors, confusions, etc. in the article, criticisms and corrections are welcome!