【每日一练】39—七夕节背景轮播图效果的实现

作者 | 杨小爱

写在前面

今天是七夕节，在这里，我先祝大家七夕节快乐，有情人终成眷属。我们节也要过，学习也要继续，因此，今天我们来实现一个漂亮的七夕幻灯轮播图效果，这个效果我个人觉得非常实用，如果你把这些背景图片换成你心意对象的照片，也依然可以。

这些图片素材，都是我在网上下载的，所以，图片素材就不额外提供了，你直接把素材换成你自己的图片素材就可以了。

下面，我们就一起来看一下今天练习的最终效果：

HTML代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--字体图标文件--><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"><title>【每日一练】39—背景轮播图效果的实现</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"><!--字体图标代码--><i class="fa fa-arrow-left"></i></button><button class="arrow right-arrow" id="right"><!--字体图标代码--><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.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')
}

写在最后

以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边的朋友，也许能够帮助到他。

最后，感谢你的支持，我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

【每日一练】39—七夕节背景轮播图效果的实现相关推荐

（39）css3实现轮播图效果
css3的轮播图和js的轮播图的区别? css3:没有一些js的逻辑,优点,过渡动画比较漂亮,缺点:兼容问题.无法实现自动轮播和点击轮播一起同时出现的效果. js轮播图:js逻辑很多,可以做的很复杂, ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果实例
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
html 图片轮播实例,简单实现轮播图效果的实例
一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; ...
用jQuery实现轮播图效果（自动播放，能手动切换）
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...

【每日一练】39—七夕节背景轮播图效果的实现

【每日一练】39—七夕节背景轮播图效果的实现相关推荐

最新文章

热门文章