作者 | 楊小愛(ài)

寫(xiě)在前面

今天是七夕節(jié)，在這里，我先祝大家七夕節(jié)快樂(lè)，有情人終成眷屬。我們節(jié)也要過(guò)，學(xué)習(xí)也要繼續(xù)，因此，今天我們來(lái)實(shí)現(xiàn)一個(gè)漂亮的七夕幻燈輪播圖效果，這個(gè)效果我個(gè)人覺(jué)得非常實(shí)用，如果你把這些背景圖片換成你心意對(duì)象的照片，也依然可以。

這些圖片素材，都是我在網(wǎng)上下載的，所以，圖片素材就不額外提供了，你直接把素材換成你自己的圖片素材就可以了。

下面，我們就一起來(lái)看一下今天練習(xí)的最終效果：

HTML代碼：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--字體圖標(biāo)文件-->    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">    <title>【每日一練】39—背景輪播圖效果的實(shí)現(xiàn)</title>  </head>  <body>    <div class="slider-container">      <div class="slide active" style="background-image: url('images/01.jpg');"></div>      <div class="slide"  style="background-image: url('images/02.jpg');"></div>      <div class="slide" style="background-image: url('images/03.jpg');"></div>      <div class="slide" style="background-image: url('images/04.jpg');"></div>      <div class="slide" style="background-image: url('images/05.jpg');"></div>      <button class="arrow left-arrow" id="left">         <!--字體圖標(biāo)代碼-->        <i class="fa fa-arrow-left"></i>      </button>      <button class="arrow right-arrow" id="right">        <!--字體圖標(biāo)代碼-->        <i class="fa fa-arrow-right"></i>      </button>    </div>  </body></html>

CSS代碼：

* {  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;  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);}

JS代碼：

const body = document.bodyconst slides = document.querySelectorAll('.slide')const leftBtn = document.getElementById('left')const rightBtn = document.getElementById('right')let activeSlide = 0rightBtn.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')}

寫(xiě)在最后

以上就是我們今天的【每日一練】的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺(jué)得有幫助的話(huà)，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊的朋友，也許能夠幫助到他。

最后，感謝你的支持，我是楊小愛(ài)，我們明天見(jiàn)。

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

【每日一練】39—七夕節(jié)背景輪播圖效果的實(shí)現(xiàn)

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)