仿网易云官网轮播图 html+css+js |
您所在的位置：网站首页 › 轮播图css优化JS和html › 仿网易云官网轮播图 html+css+js |
仿网易云官网轮播图 html+css+js
|
效果：
【html+css+js】仿网易云轮播图 实现（后面有完整源码）：1. 定义标签，看注释： 2. 设置底层盒子和虚化背景的css样式： main{ position: relative; top: 20vh; height: 300px; width: 100%; overflow: hidden; } main .bg{ position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: url(img/images/1.jpg); background-size: 100% 100%; filter: blur(30px); }position: relative; 相对定位 overflow: hidden; 溢出隐藏 position: absolute; 绝对定位 background-image: url(img/images/1.jpg); 背景图先设置轮播图的第一张 filter: blur(30px); 模糊效果，让背景虚化 3. 设置放图片的底层盒子的css： main section{ position: relative; left: 50%; transform: translateX(-50%); height: 100%; width: 100%; max-width: 980px; }left: 50%; transform: translateX(-50%); 居中。 max-width: 980px; 最大宽度只有980px； 4. 设置放图片的盒子与图片的css： main section .tupian{ width: 100%; height: 100%; } main section .tupian .image{ width: 100%; height: 100%; object-fit: cover; }object-fit: cover;保持图片原有尺寸比例。但部分内容可能被剪切。 5. 设置放小圆点的盒子与小圆点的css： main .select{ position: absolute; bottom: 10px; height: 30px; width: 100%; display: flex; justify-content: center; align-items: center; } main .select .dian{ margin: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgb(255, 254, 254); } main .select .dian:hover{ background-color: rgb(255, 254, 254); cursor: pointer; }display: flex; justify-content: center; align-items: center; flex布局，让子元素居中对齐。 margin: 3px; 外边距，让圆点间有间隔。 background-color: rgb(255, 254, 254); 白色； cursor: pointer; 鼠标样式为小手。 6. 设置左右按钮的css： main section .bt{ position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(82, 81, 81, 0.2); border-radius: 20%; cursor: pointer; transition: all 0.3s; } main section .bt:hover{ box-shadow: inset 0 0 1px rgba(255, 255, 255,.8), inset 0 0 5px rgba(255, 255, 255,.8), inset 0 0 15px rgba(255, 255, 255,.8); } main section .left{ left: -60px; } main section .right{ right: -60px; }top: 50%; transform: translateY(-50%); 垂直居中 transition: all 0.3s; 过渡效果 box-shadow: inset 0 0 1px rgba(255, 255, 255,.8) 阴影 7. 当设置屏幕过小时，左右按钮的位置要变化： /*当屏幕尺寸小于1100px时，应用下面的CSS样式*/ @media screen and (max-width: 1100px) { main section .left{ left: 20px; } main section .right{ right: 20px; } }以上写法为CSS3自适应布局与Media Queries，详细用法点击链接。 8. 设置左右按钮里的字体图标的css样式： main section .anniu{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 25px; color: rgb(255, 255, 255); user-select: none; transition: all 0.3s; }top: 50%; left: 50%; transform: translate(-50%,-50%);居中 user-select: none; 文本不可选中 transition: all 0.3s; 过渡。 9. 设置类.yun与.check，.yun的作用是设置动画，让图片在自动轮播切图时有一种变透明然后再切的效果。.check的作用是让当前图片对应的圆点为背景为白色。 .yun{ animation: bian 5s linear infinite; } @keyframes bian{ 0%,100%{ opacity: 0.2; backdrop-filter: blur(10px); } 30%,80%{ opacity: 1; backdrop-filter: blur(0px); } } .check{ background-color: rgb(255, 254, 254); }10.js部分，用的都是基础的js，没有用什么算法和特殊的函数。看注释。 /* 获取元素 */ var main = document.getElementById('main'); var bg = document.querySelector('.bg'); var image = document.querySelector('.image'); var select = document.querySelector('.select'); var dian = document.getElementsByClassName('dian'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); /* 设置数组，里面放图片的地址 */ var picture = ['img/images/1.jpg', 'img/images/2.jpg', 'img/images/3.jpg', 'img/images/4.jpg', 'img/images/5.jpg', 'img/images/6.jpg']; /* 设置index为0，这个变量后面就一直用来充当图片数组的下标 */ var index = 0; /* 从图片数组的长度，动态添加小圆点 */ for (let i = 0; i for (let i = 0; i /* index加1 */ index = index + 1; if (index == picture.length) { index = 0; } /* 显示图片，显示图片数组下标为目前index那张 */ image.src = picture[index]; /* 虚化背景也要换 */ bg.style.cssText = ` background-image: url(${picture[index]});` /* 小圆点的显示 */ qingchu(); /* 显示那张图就显示对于的圆点，给他.check的样式 */ dian[index].classList.add('check'); /* 若index超过，回到-1 */ if (index == picture.length - 1) { index = -1; } } /* 点击向右按钮时的操作 */ right.addEventListener('click', function () { /* 直接用上面的切图封装函数 */ yunxing(); }) /* 点击向左按钮时的操作，跟上面的切下张图封装函数异曲同工 */ left.addEventListener('click', function () { index = index - 1; if (index == -1) { index = picture.length - 1; } image.src = picture[index]; bg.style.cssText = ` background-image: url(${picture[index]});` /* 向左时小圆点的显示 */ qingchu(); dian[index].classList.add('check'); }) /* 进入main这个底层盒子时，停止自动轮播和.yun类的动画效果，自动轮播的定时器我写在最后面 */ main.addEventListener('mouseover', function () { clearInterval(lunbo); image.classList.remove('yun'); }) /* 离开main这个底层盒子时，开始自动轮播和.yun类的动画效果，自动轮播的定时器我写在最后面 */ main.addEventListener('mouseout', function () { lunbo = setInterval(yunxing, 5000); image.classList.add('yun'); image.style.animationDelay = '5s'; }) /* 点击小圆点时的切图操作 */ for (let i = 0; i qingchu(); this.classList.add('check'); index = i; image.src = picture[index]; bg.style.cssText = ` background-image: url(${picture[index]});` }) } /* 自动轮播定时器与初始状态 */ lunbo = setInterval(yunxing, 5000); image.classList.add('yun'); dian[0].classList.add('check'); 完整代码 Document @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?wr5es'); src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?wr5es') format('truetype'), url('fonts/icomoon.woff?wr5es') format('woff'), url('fonts/icomoon.svg?wr5es#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } * { font-family: 'icomoon'; margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: flex-start; background-color: rgba(50, 128, 102, 0.9); } main { position: relative; top: 20vh; height: 300px; width: 100%; overflow: hidden; } main .bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: url(img/images/1.jpg); background-size: 100% 100%; filter: blur(30px); } main section { position: relative; left: 50%; transform: translateX(-50%); height: 100%; width: 100%; max-width: 980px; } main section .tupian { width: 100%; height: 100%; } main section .tupian .image { width: 100%; height: 100%; object-fit: cover; } .yun { animation: bian 5s linear infinite; } @keyframes bian { 0%, 100% { opacity: 0.2; backdrop-filter: blur(10px); } 30%, 80% { opacity: 1; backdrop-filter: blur(0px); } } main .select { position: absolute; bottom: 10px; height: 30px; width: 100%; display: flex; justify-content: center; align-items: center; } main .select .dian { margin: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgb(255, 254, 254); } main .select .dian:hover { background-color: rgb(255, 254, 254); cursor: pointer; } .check { background-color: rgb(255, 254, 254); } main section .bt { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(82, 81, 81, 0.2); border-radius: 20%; cursor: pointer; transition: all 0.3s; } main section .bt:hover { box-shadow: inset 0 0 1px rgba(255, 255, 255, .8), inset 0 0 5px rgba(255, 255, 255, .8), inset 0 0 15px rgba(255, 255, 255, .8); } main section .left { left: -60px; } main section .right { right: -60px; } /*当屏幕尺寸小于1100px时，应用下面的CSS样式,详细用法网址：https://www.xuewangzhan.net/baike/css3-379.html*/ @media screen and (max-width: 1100px) { main section .left { left: 20px; } main section .right { right: 20px; } } main section .anniu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; color: rgb(255, 255, 255); user-select: none; transition: all 0.3s; } .txt { position: fixed; bottom: 5vh; left: 50%; transform: translateX(-50%); width: 100%; height: 100px; font-family: 'fangsong'; font-size: 50px; text-align: center; color: rgba(255, 255, 255, .9); user-select: none; } 北极光之夜 /* 获取元素 */ var main = document.getElementById('main'); var bg = document.querySelector('.bg'); var image = document.querySelector('.image'); var select = document.querySelector('.select'); var dian = document.getElementsByClassName('dian'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); /* 设置数组，里面放图片的地址 */ var picture = ['img/images/1.jpg', 'img/images/2.jpg', 'img/images/3.jpg', 'img/images/4.jpg', 'img/images/5.jpg', 'img/images/6.jpg']; /* 设置index为0，这个变量后面就一直用来充当图片数组的下标 */ var index = 0; /* 从图片数组的长度，动态添加小圆点 */ for (let i = 0; i for (let i = 0; i /* index加1 */ index = index + 1; if (index == picture.length) { index = 0; } /* 显示图片，显示图片数组下标为目前index那张 */ image.src = picture[index]; /* 虚化背景也要换 */ bg.style.cssText = ` background-image: url(${picture[index]});` /* 小圆点的显示 */ qingchu(); /* 显示那张图就显示对于的圆点，给他.check的样式 */ dian[index].classList.add('check'); /* 若index超过，回到-1 */ if (index == picture.length - 1) { index = -1; } } /* 点击向右按钮时的操作 */ right.addEventListener('click', function () { /* 直接用上面的切图封装函数 */ yunxing(); }) /* 点击向左按钮时的操作，跟上面的切下张图封装函数异曲同工 */ left.addEventListener('click', function () { index = index - 1; if (index == -1) { index = picture.length - 1; } image.src = picture[index]; bg.style.cssText = ` background-image: url(${picture[index]});` /* 向左时小圆点的显示 */ qingchu(); dian[index].classList.add('check'); }) /* 进入main这个底层盒子时，停止自动轮播和.yun类的动画效果，自动轮播的定时器我写在最后面 */ main.addEventListener('mouseover', function () { clearInterval(lunbo); image.classList.remove('yun'); }) /* 离开main这个底层盒子时，开始自动轮播和.yun类的动画效果，自动轮播的定时器我写在最后面 */ main.addEventListener('mouseout', function () { lunbo = setInterval(yunxing, 5000); image.classList.add('yun'); image.style.animationDelay = '5s'; }) /* 点击小圆点时的切图操作 */ for (let i = 0; i qingchu(); this.classList.add('check'); index = i; image.src = picture[index]; bg.style.cssText = ` background-image: url(${picture[index]});` }) } /* 自动轮播定时器与初始状态 */ lunbo = setInterval(yunxing, 5000); image.classList.add('yun'); dian[0].classList.add('check'); 总结：CSS3自适应布局与Media Queries，详细用法点击链接。 其它文章： 炫彩流光文字 html+css 气泡浮动背景特效 html+css 简约时钟特效 html+css+js 赛博朋克风格按钮 html+css 响应式卡片悬停效果 html+css 水波加载动画 html+css 导航栏滚动渐变效果 html+css+js 书本翻页 html+css 3D立体相册 html+css 霓虹灯绘画板效果 html+css+js 记一些css属性总结（一） Sass总结笔记 …等 |
可自动轮播，左右箭头按钮和下方小圆点可切图，鼠标移入时停止自动轮播。 视频演示：【本文地址】
今日新闻 |
推荐新闻 |