本项目可以通过点击左右按钮来修改现实的图片，并同步修改背景。
background-slider.png
html部分定义背景、图片和按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符编码为UTF-8 -->
<meta charset="UTF-8" />
<!-- 虚拟窗口设置，宽度为设备宽度，缩放比例为1.0 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 引入外部CSS，并添加完整属性和跨域设置 -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<!-- 引入本地CSS -->
<link rel="stylesheet" href="style.css" />
<!-- 标题 -->
<title>Background Slider</title>
</head>
<body>
<!-- 实际显示区域 -->
<div class="slider-container">
<!-- 前方显示图片区域-->
<div
class="slide active"
style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');"
></div>
<div
class="slide"
style="
background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');
"
></div>
<div
class="slide"
style="
background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
"
></div>
<div
class="slide"
style="
background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
"
></div>
<div
class="slide"
style="
background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
"
></div>
<!-- 左箭头按钮 -->
<button class="arrow left-arrow" id="left">
<i class="fas fa-arrow-left"></i>
</button>
<!-- 右箭头按钮 -->
<button class="arrow right-arrow" id="right">
<i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- 引入js -->
<script src="script.js"></script>
</body>
</html>
js 部分定义点击左右按钮时触发的事件，主要是修改记录图片的索引，用来更换图片。
const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')
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()
})
// 设置背景图片
function setBgToBody() {
body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}
// 设置当前图片添加 active 类名
function setActiveSlide() {
slides.forEach((slide) => slide.classList.remove('active'))
slides[activeSlide].classList.add('active')
}
CSS 部分稍微复杂一些，定义了背景，然后通过 body::after 控制背景的透明度。
按钮采用相对浏览器的绝对定位放置在其中。
所有图片都堆叠在一起，但是只有一张图片的透明度是1（active类），其他图片透明度都为0，因此只能看到这张图片。
/* 所有元素 */
* {
box-sizing: border-box; /* 采用 border-box 方式计算元素宽高*/
}
/* body 元素 */
body {
font-family: sans-serif; /* 设置字体 */
display: flex; /* 布局方式采用弹性布局 */
flex-direction: column; /* 弹性布局方式为按列 */
align-items: center; /* 元素在容器垂直方向居中对齐，用于display: flex中 */
justify-content: center; /* 元素在容器水平方向居中对齐，用于display: flex中 */
height: 100vh; /* 高度为100% */
overflow: hidden; /* 隐藏溢出部分 */
margin: 0; /* 外边距为 0 */
background-position: center center; /* 背景居中定位 */
background-size: cover; /* 扩展图片覆盖背景 */
transition: 0.4s; /* 渐变时间 0.4s */
}
/* body之前的元素 */
body::before {
content: ''; /* 内容为空，::before伪元素必须包含content属性 */
position: absolute; /* 采用绝对定位 */
top: 0; /* 顶部偏移为0 */
left: 0; /* 左侧偏移为0 */
width: 100%; /* 宽度100% */
height: 100vh; /* 高度为100% */
background-color: rgba(0, 0, 0, 0.7); /* 背景透明度为0.7 */
z-index: -1; /* z轴索引为-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; /* 高度为 70% */
width: 70vw; /* 宽度为 70% */
position: relative; /* 使用相对定位 */
overflow: hidden; /* 隐藏溢出部分 */
}
.slide {
opacity: 0; /* 透明度为0，这样图片均不可见 */
height: 100vh; /* 高度为 100% */
width: 100vw; /* 宽度为 100% */
background-position: center center; /* 背景居中定位 */
background-size: cover; /* 扩展图片覆盖背景 */
position: absolute; /* 采用绝对定位 */
top: -15vh; /* 顶部偏移为 -15% */
left: -15vw; /* 左侧偏移为 -15% */
transition: 0.4s ease; /* 过渡效果 */
z-index: 1; /* z轴索引为1，在上方 */
}
.slide.active {
opacity: 1; /* 当前图片透明度为1 */
}
.arrow {
position: fixed; /* 相对浏览器绝对定位 */
background-color: transparent; /* 背景透明 */
color: #fff; /* 颜色为白色 */
padding: 20px; /* 内边距为 20px */
font-size: 30px; /* 字体大小为 30px */
border: 2px solid orange; /* 边框大小为2px，实体，橘黄色 */
top: 50%; /* 顶部偏移 50% */
transform: translateY(-50%); /* Y轴移动-50% */
cursor: pointer; /* 光标为小手 */
}
.arrow:focus {
outline: 0; /* 聚焦后外边框消失 */
}
.left-arrow {
left: calc(15vw - 65px); /* 左箭头左侧偏移 */
}
.right-arrow {
right: calc(15vw - 65px); /* 右箭头右侧偏移 */
}
最终效果如下：
background-slider.gif
网友评论