js + css 做出网易云音乐的轮播图

先说一下思路，网易云轮播图是这样的，每隔一段时间（这里运用到了js的定时器）右边的图片会放大（css的transform）并切换（定位的z-index）上来（这里还运用了过渡transition），最前面一张图片会到左边的下面，如此重复轮播，鼠标移入图片区域（鼠标移入事件），轮播暂停（清除定时器），点击左右箭头可以切换图片（鼠标点击事件），鼠标移入图片下方的悬浮点也可以快速切换图片（悬浮点的鼠标移入事件，这里也要记得清除定时器）。

好了，思路说完了，接下来我们开始写代码

首先构建文件夹，images里面放轮播的图片，和两个左右箭头图片

先写基本结构代码

<!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"><title>网易云轮播图</title>
</head>
<body><div class="carousel "><!-- 图片 --><div class="carousel_img"><img class="centerImg" src="./images/bizhi (0).jpg"><img class="rightImg" src="./images/bizhi (1).jpg"><img class="leftImg" src="./images/bizhi (2).jpg"></div><!-- 图片下面的悬浮点 --><ul class="carousel_dot"><li class="dotSty"></li><li></li><li></li></ul><!-- 左右两边的箭头 --><box class="carousel_arrows"><img src="./images/arrowLeft.png"><img src="./images/arrowRight.png"></box></div>
</body>
</html>

然后再来写一些样式代码

<style>/* 清除默认样式 */* {padding: 0;margin: 0;font-size: 0;}/* 给轮播图盒子设置样式 */.carousel {margin: 50px auto;width: 1000px;height: 560px;position: relative;}/* 给图片的盒子设置样式 */.carousel_img {width: 100%;height: 100%;position: relative;}/* 给图片设置样式 */.carousel_img img {max-width: 100%;position: absolute;left: 0;top: 0;border-radius: 15px;/* 设置圆角 */transition: 1s;/* 给图片设置过渡效果 */transform: scale(0.7);/* 给图片设置缩小百分之七十 */z-index: 500;/* 给图片设置层级 */}/* 给左中右三个图片分别设置样式这里因为类样式权重不够，所以加上了!important*/.leftImg {left: -300px !important;}.centerImg {transform: scale(1) !important;z-index: 900 !important;left: 0 !important;}.rightImg {left: 300px !important;}.carousel_dot {width: 30%;height: 40px;position: absolute;bottom: -80px;/* 这里是给悬浮点的父盒子设置水平居中 */left: 50%;transform: translateX(-50%);/* 给悬浮点的父盒子设置弹性布局,让悬浮点均匀排列 */display: flex;justify-content: space-evenly;align-items: center;transition: 1s;}/* 给悬浮点设置样式 */.carousel_dot li {width: 20px;height: 20px;border-radius: 50%;opacity: 0.5;background-color: #808695;transition: 0.3s;}/* 给悬浮点加个伪类,鼠标移动上去有个变化的效果 */.carousel_dot li:hover {opacity: 1;background-color: #3399ff;}/* 给当前图片所对应的悬浮点添加样式 */.dotSty {opacity: 1 !important;background-color: #3399ff !important;}/* 给左右箭头的父盒子添加样式 */.carousel_arrows {width: 80%;height: 100%;display: flex;justify-content: space-between;align-items: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%);z-index: 910;transition: 1s;/* opacity: 0; */}/* 给左右箭头图片设置样式 */.carousel_arrows img {width: 20px;height: 20px;padding: 10px;border-radius: 50%;background-color: #3399ff;}/* 进入以下元素,改变光标样式 */.carousel_arrows img:hover,.carousel_dot li:hover,.carousel {cursor: pointer;}</style>

写到这里，我们就能看到以下效果

然后我们再来写一些js代码，让他动起来

<script>//网易云轮播图，position，z-index，transform组合实现轮播图const carousel = document.querySelector('.carousel') // 轮播图盒子const arrowsArr = document.querySelectorAll('.carousel_arrows img') // 箭头图片数组const dots = document.querySelectorAll('.carousel_dot li')  // 悬浮点元素数组const carouselArrows = document.querySelector('.carousel_arrows') // 左右箭头父元素const imageArr = document.querySelectorAll('.carousel_img img') // 轮播图片数组let timer   // 定时器let site = 0 // 图片实时位置  // 首先让图片自动轮播，设置一个定时器，每隔一段时间，修改左中右图片的classfunction setup() {timer = setInterval(() => {// 切换到下一张图片site++run(site)}, 2000);}function run(index) {// 纠正实时监控图片位置的stieif (index < 0) {// 当index小于0的时候,site应该为最后一张图片的索引site = dots.length - 1index = dots.length - 1}if (index === dots.length) {// 当index等于悬浮点数组长度时,stie应该为第一张图片的索引site = 0index = 0}// 切换悬浮点样式const dotSty = document.querySelector('.dotSty') // 找到当前有样式的悬浮点dotSty.className = ''   // 清除样式dots[index].className = 'dotSty' // 给下一个悬浮点添加样式// 改变图片样式,达到轮播效果// 获取当前有左中右样式的图片const leftImg = document.querySelector('.leftImg')const centerImg = document.querySelector('.centerImg')const rightImg = document.querySelector('.rightImg')// 清除样式leftImg.className = ''centerImg.className = ''rightImg.className = ''// 把左中右的样式给下一组图片// 把centerImg的样式赋给下一张图片，index为下一张图片索引imageArr[index].className = 'centerImg'// []里的三元运算符判断的是，当前显示的图片上一张图片的索引或者下一张图片的索引// 是否超过了最大值（图片数组长度减一）或者最小值（0）imageArr[index - 1 < 0 ? imageArr.length - 1 : index - 1].className = 'leftImg' imageArr[index + 1 >= imageArr.length ? 0 : index + 1].className = 'rightImg'// 做到这里，就能自动切换轮播图了// 接下来我们添加一些互动效果，这才是js的魅力}// 给轮播图盒子添加鼠标移入和移除事件// 使得轮播图有暂停效果，和左右箭头有显示隐藏效果carousel.onmouseenter = () => {clearInterval(timer)carouselArrows.style.opacity = 0.7}carousel.onmouseleave = () => {setup()carouselArrows.style.opacity = 0}// 给箭头添加点击事件，左右切换轮播图for (let i = 0; i < arrowsArr.length; i++) {arrowsArr[i].onclick = () => {if (i === 0) {site--run(site)} else {site++run(site)}}}// 给悬浮点添加鼠标移入事件，切换图片，这里记得清除定时器for (let i = 0; i < dots.length; i++) {dots[i].onmouseenter = () => {clearInterval(timer)run(i)site = i}}// 切换到其他浏览器窗口时，停止轮播图，回来时继续轮播document.addEventListener('visibilitychange', () => {if (document.hidden) {clearInterval(timer)} else {setup()}})setup()</script>

写到这里这个轮播图就完成啦

想要添加更多的图片，直接在这里添加img标签就行了，记得图片路径不要写错了

还有一件事，有多少个img图片，记得就要有多少个悬浮点，记得在这里添加悬浮点

下面就是完整的代码了

<!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"><title>网易云轮播图</title><style>/* 清除默认样式 */* {padding: 0;margin: 0;font-size: 0;}/* 给轮播图盒子设置样式 */.carousel {margin: 50px auto;width: 1000px;height: 560px;position: relative;}/* 给图片的盒子设置样式 */.carousel_img {width: 100%;height: 100%;position: relative;}/* 给图片设置样式 */.carousel_img img {max-width: 100%;position: absolute;left: 0;top: 0;border-radius: 15px;/* 设置圆角 */transition: 1s;/* 给图片设置过渡效果 */transform: scale(0.7);/* 给图片设置缩小百分之七十 */z-index: 500;/* 给图片设置层级 */}/* 给左中右三个图片分别设置样式这里因为类样式权重不够，所以加上了!important*/.leftImg {left: -300px !important;}.centerImg {transform: scale(1) !important;z-index: 900 !important;left: 0 !important;}.rightImg {left: 300px !important;}.carousel_dot {width: 30%;height: 40px;position: absolute;bottom: -80px;/* 这里是给悬浮点的父盒子设置水平居中 */left: 50%;transform: translateX(-50%);/* 给悬浮点的父盒子设置弹性布局,让悬浮点均匀排列 */display: flex;justify-content: space-evenly;align-items: center;transition: 1s;}/* 给悬浮点设置样式 */.carousel_dot li {width: 20px;height: 20px;border-radius: 50%;opacity: 0.5;background-color: #808695;transition: 0.3s;}/* 给悬浮点加个伪类,鼠标移动上去有个变化的效果 */.carousel_dot li:hover {opacity: 1;background-color: #3399ff;}/* 给当前图片所对应的悬浮点添加样式 */.dotSty {opacity: 1 !important;background-color: #3399ff !important;}/* 给左右箭头的父盒子添加样式 */.carousel_arrows {width: 80%;height: 100%;display: flex;justify-content: space-between;align-items: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%);z-index: 910;transition: 1s;/* opacity: 0; */}/* 给左右箭头图片设置样式 */.carousel_arrows img {width: 20px;height: 20px;padding: 10px;border-radius: 50%;background-color: #3399ff;}/* 进入以下元素,改变光标样式 */.carousel_arrows img:hover,.carousel_dot li:hover,.carousel {cursor: pointer;}</style>
</head><body><div class="carousel "><!-- 图片 --><div class="carousel_img"><img class="centerImg" src="./images/bizhi (0).jpg"><img class="rightImg" src="./images/bizhi (1).jpg"><img class="leftImg" src="./images/bizhi (2).jpg"></div><!-- 图片下面的悬浮点 --><ul class="carousel_dot"><li class="dotSty"></li><li></li><li></li></ul><!-- 左右两边的箭头 --><box class="carousel_arrows"><img src="./images/arrowLeft.png"><img src="./images/arrowRight.png"></box></div><script>//网易云轮播图，position，z-index，transform组合实现轮播图const carousel = document.querySelector('.carousel') // 轮播图盒子const arrowsArr = document.querySelectorAll('.carousel_arrows img') // 箭头图片数组const dots = document.querySelectorAll('.carousel_dot li')  // 悬浮点元素数组const carouselArrows = document.querySelector('.carousel_arrows') // 左右箭头父元素const imageArr = document.querySelectorAll('.carousel_img img') // 轮播图片数组let timer   // 定时器let site = 0 // 图片实时位置  // 首先让图片自动轮播，设置一个定时器，每隔一段时间，修改左中右图片的classfunction setup() {timer = setInterval(() => {// 切换到下一张图片site++run(site)}, 2000);}function run(index) {// 纠正实时监控图片位置的stieif (index < 0) {// 当index小于0的时候,site应该为最后一张图片的索引site = dots.length - 1index = dots.length - 1}if (index === dots.length) {// 当index等于悬浮点数组长度时,stie应该为第一张图片的索引site = 0index = 0}// 切换悬浮点样式const dotSty = document.querySelector('.dotSty') // 找到当前有样式的悬浮点dotSty.className = ''   // 清除样式dots[index].className = 'dotSty' // 给下一个悬浮点添加样式// 改变图片样式,达到轮播效果// 获取当前有左中右样式的图片const leftImg = document.querySelector('.leftImg')const centerImg = document.querySelector('.centerImg')const rightImg = document.querySelector('.rightImg')// 清除样式leftImg.className = ''centerImg.className = ''rightImg.className = ''// 把左中右的样式给下一组图片// 把centerImg的样式赋给下一张图片，index为下一张图片索引imageArr[index].className = 'centerImg'// []里的三元运算符判断的是，当前显示的图片上一张图片的索引或者下一张图片的索引// 是否超过了最大值（图片数组长度减一）或者最小值（0）imageArr[index - 1 < 0 ? imageArr.length - 1 : index - 1].className = 'leftImg' imageArr[index + 1 >= imageArr.length ? 0 : index + 1].className = 'rightImg'// 做到这里，就能自动切换轮播图了// 接下来我们添加一些互动效果，这才是js的魅力}// 给轮播图盒子添加鼠标移入和移除事件// 使得轮播图有暂停效果，和左右箭头有显示隐藏效果carousel.onmouseenter = () => {clearInterval(timer)carouselArrows.style.opacity = 0.7}carousel.onmouseleave = () => {setup()carouselArrows.style.opacity = 0}// 给箭头添加点击事件，左右切换轮播图for (let i = 0; i < arrowsArr.length; i++) {arrowsArr[i].onclick = () => {if (i === 0) {site--run(site)} else {site++run(site)}}}// 给悬浮点添加鼠标移入事件，切换图片，这里记得清除定时器for (let i = 0; i < dots.length; i++) {dots[i].onmouseenter = () => {clearInterval(timer)run(i)site = i}}// 切换到其他浏览器窗口时，停止轮播图，回来时继续轮播document.addEventListener('visibilitychange', () => {if (document.hidden) {clearInterval(timer)} else {setup()}})setup()</script>
</body></html>

我的文件路径是这样的，路径记得不要错

js + css 做出网易云音乐的轮播图相关推荐

html网易云音乐图片轮播效果,看网易云音乐如何在界面设计中突出特色功能
一般观念中一款产品的功能越具特色就会放在越突出的位置,但是如果一款产品层级较深,底层架构复杂导致若干功能优先级并列,那在UI设计中如何做到强化和弱化呢? 作为网易云音乐陈年老粉,不得不说这款产品做的真 ...
原生js模仿网易云音乐首页轮播图
前端初学者,最近在学习该如何写轮播图.看了一些大神的教程之后,想模仿着写一个和网易云音乐首页类似的轮播图.由于还没有学JQuery,所以自己想了个函数用来实现淡入的效果.逻辑思路借鉴了爱嘎的Front ...
html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现
Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...
HTML+CSS实现网易云音乐首页的主播电台页面
HTML+CSS实现网易云音乐首页的主播电台页面这个页面首先使用了css的定位(postion)属性.弹性盒子(display)属性以及VM与REM,图标使用了阿里巴巴矢量图标库的矢量图标.下面让我 ...
使用JS+CSS的网易云轮播图的实现（完整代码）
一个网易云轮播图的实现 <!DOCTYPE html> <html lang="chn"> <head><meta charset=&qu ...
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星 ...
【js】仿照网易云音乐制作的音乐播放组件
效果样式介绍仿照网易云音乐的音乐播放组件,使用JavaScript动态生成内容,无需更改原有HTML结构,只需要导入js与css文件即可在页面中拥有与网易云音乐同款的音乐播放组件 GitHub地址 ...
网易云音乐：基于分布式图学习的推荐系统优化之路
在"精准推荐者得民心"的今天,推荐系统已成为各大互联网公司的标配.但由于现实中很多数据是非欧氏空间生成的(例如,社交网络.信息网络等),一些复杂场景下的业务需求很难通过协同过滤等基 ...
网易云音乐：基于分布式图学习PGL的推荐系统优化之路
在"精准推荐者得民心"的今天,推荐系统已成为各大互联网公司的标配.但由于现实中很多数据是非欧氏空间生成的(例如,社交网络.信息网络等),一些复杂场景下的业务需求很难通过协同过滤等基 ...

js + css 做出网易云音乐的轮播图

js + css 做出网易云音乐的轮播图相关推荐

最新文章

热门文章