升级版的全屏轮播图
Posted 撒哈拉的雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了升级版的全屏轮播图相关的知识，希望对你有一定的参考价值。
具备的功能：
1、左右自动轮播
2、鼠标悬停在图片上时，停止轮播，移除时，开始轮播
3，点击导航圆点，移到响应位置图片，同时导航圆点有0.3秒的显示特效
4、鼠标移到屏幕左右时，出现线性渐变特效，点击，会左右移到图片
最终结果图：
完整代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html,body{ padding: 0;margin: 0; overflow: hidden; /*做全屏滚动banner的关键*/ } ul{ list-style: none; padding: 0;margin: 0; } .bd{ border: 2px solid red; } .cont .bg{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; background-position: 0px center, 0px center; background-size: 100vw 100vh; -webkit-filter: brightness(150%); filter: brightness(150%); } .slide { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-1{ background: url("./test-img/timg-1.jpg") center center no-repeat; } .bg-2{ background: url("./test-img/timg-2.jpg") center center no-repeat; } .bg-3{ background: url("./test-img/timg-3.jpg") center center no-repeat; } .slide-darkbg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; } .slide-darkbg:after { content: \'\'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83); } .slide-text-wrapper { z-index: 15; } .slide-letter{ top: 0px;left: 0px; font-size: 30vw; font-weight: 800; color: #000; z-index: 2; -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; } .trans-select{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .slide-sty{ position: absolute; display: -webkit-box; /*是老规范，要兼顾古董机子就加上它。*/ display: -ms-flexbox; display: flex; /*是新规范，老机子不支持的*/ width: 100%; height: 100%; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; align-items: center; } .slide-text { font-size: 8vw; font-weight: 800; text-transform: uppercase; letter-spacing: 12px; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .slide-text:nth-child(odd) { z-index: 2; } .slide-text:nth-child(even) { z-index: 1; } .nav { position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); list-style-type: none; z-index: 10; } .nav-slide { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: 10px; cursor: pointer; } .nav-slide:hover:after { -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .nav-slide:after { content: \'\'; position: absolute; top: 50%; left: 50%; width: 75%; height: 75%; border-radius: 50%; background-color: #fff; opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0, 0); transform: translate(-50%, -50%) scale(0, 0); -webkit-transition: .3s; transition: .3s; } .nav-slide-1 { margin-left: 0; } .nav-active:after { -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .slider{ height: 100vh; position: relative; cursor: all-scroll; /*-webkit-transition: -webkit-transform 750ms ease-in-out;*/ /*transition: transform 750ms ease-in-out;*/ display: flex; left: -100%; } .side-nav { position: absolute; width: 10%; height: 100%; top: 0; z-index: 20; cursor: pointer; opacity: 0; -webkit-transition: 300ms; transition: 300ms; } .side-nav:hover { opacity: .5; } .side-nav--right { right: 0; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%); } .side-nav--left { left: 0; background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%); background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%); } </style> </head> <body> <div class="cont"> <div class="slider trans-select"> <div class="slide sw slide-1" data-target="1"> <div class="slide-darkbg bg bg-1"></div> <div class="slide-sty slide-text-wrapper"> <div class="slide-sty slide-letter bg bg-1 trans-select">专</div> <div class="slide-text">金</div> <div class="slide-text">融</div> <div class="slide-text">专</以上是关于升级版的全屏轮播图的主要内容，如果未能解决你的问题，请参考以下文章