这里面没啥，就是几张图片，以及左右两个按钮的布局。

再来看css:
这里面的重点是蒙层，以及图片在默认的时候不显示，而在到它的时候就赋上active值让其显示。

* {box-sizing: border-box;
}body {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;background-position: center center;background-size: cover;transition: 0.4s;
}/* 添加一个蒙层 */
body::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.7);/* 防止覆盖住按钮 */z-index: -1;
}/* 小的滑框 */
.slider-container {box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);height: 70vh;width: 70vw;position: relative;/* 溢出内容隐藏 */overflow: hidden;
}/* 默认的时候背景图片 */
.slide {opacity: 0;height: 100vh;width: 100vw;background-position: center center;background-size: cover;position: absolute;top: -15vh;left: -15vw;transition: 0.4s ease;z-index: 1;
}.slide.active {opacity: 1;
}/* 按钮 */
.arrow {position: fixed;background-color: transparent; color: #fff;padding: 20px;font-size: 30px;border: 2px solid orange;top: 50%;transform: translateY(-50%);cursor: pointer;
}/* 去掉轮廓 */
.arrow:focus {outline: 0;
}/* 左右按钮的位置 */
.left-arrow {left: calc(15vw - 65px);
}.right-arrow {right: calc(15vw - 65px);
}

再来看JavaScript部分：

const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')// 一开始默认下标为0，即显示第一张
let activeSlide = 0// 左边的滑块，下标++，即下一张图片
rightBtn.addEventListener('click', () => {activeSlide++//   最后一张再往后就直接到第一张if (activeSlide > slides.length - 1) {activeSlide = 0}setBgToBody()setActiveSlide()
})// 右边的滑块，下标--，即上一张图片
leftBtn.addEventListener('click', () => {activeSlide--//   到第一张之后再上一张就到最后一张if (activeSlide < 0) {activeSlide = slides.length - 1}setBgToBody()setActiveSlide()
})setBgToBody()// 改变背景图片
function setBgToBody() {body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}// 到哪个图片的下标后就给它加上active，就能让图片opacity为1显示
/* 当前opacity为1显示之后其他的就为0了 */
function setActiveSlide() {slides.forEach((slide) => slide.classList.remove('active'))slides[activeSlide].classList.add('active')
}

注释写的比较清楚，大家如果有不懂的直接评论区问就行，这些分开来看还是很基础的。

今天的小demo就到这里了，大家加油！

项目gitee地址