【demo50】背景图点击切换

客怎眠qvq

发布于 2022-11-01 16:28:01

9290

发布于 2022-11-01 16:28:01

文章被收录于专栏：某菜鸟の小屋

📢前言

代码取自开源项目50projects50days，用作个人学习和巩固三件套的知识，增加了注释，可能会有小改动。

在线演示地址

📝实现思路及效果

💻代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.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" />
  <title>背景图点击切换</title>
  <link rel="shortcut icon" href="../logo.svg">
</head>

<body>
  <!-- 一张大图 背景虚化 作为背景(加透明度蒙版) -->
  <!-- 一张相同图 改变 放置图片容器的视区和视窗 实现蒙版中心透明的效果 -->
  <!-- 两个button 控制图片上一张 下一张切换 -->
  <div class="slide-container">
    <div class="slide active" style="background-image: url(https://vip1.loli.io/2022/05/09/P5sNzBUnZ947m6f.jpg)">
    </div>

    <div class="slide" style="background-image: url(https://vip1.loli.io/2022/05/09/HMJEWiOfaVFGjAI.jpg);"></div>
    <div class="slide" style="background-image: url(https://vip1.loli.io/2022/05/09/oZqalP8McVQR1fd.jpg);"></div>
    <div class="slide" style="background-image: url(https://vip1.loli.io/2022/05/09/NSAprtCDBH1Xd3F.jpg);"></div>
    <div class="slide" style="background-image: url(https://vip2.loli.io/2022/05/09/iCL9GxptQmJ5fB6.jpg);"></div>
    <div class="slide" style="background-image: url(https://vip1.loli.io/2022/05/09/NXQx62jYyERG8FU.jpg);"></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>

  <script src="script.js"></script>

</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  background-position: center center;
  /* 复习知识点 背景图尺寸 cover和contain的区别 */
  background-size: cover;
  transform: 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;
}

.slide-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);
}

script.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()
})

setBgToBody()

function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}

function setActiveSlide() {
  slides.forEach((slide) => slide.classList.remove('active'))

  slides[activeSlide].classList.add('active')
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-08-29，如有侵权请联系 cloudcommunity@tencent.com 删除

css