📢前言
代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
在线演示地址
📝实现思路及效果


💻代码
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <!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> <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
| @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; 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| 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') }
|