最终结果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html { box-sizing: border-box; font-family: 'Open Sans', sans-serif; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; } body { background-color: #000; overflow: hidden; } .cont { position: relative; height: 100vh; overflow: hidden; } .slider { position: relative; height: 100%; cursor: all-scroll; } .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 { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; } .slide-1 { left: 0%; } .slide-2 { left: 100%; } .slide-3 { left: 200%; } .slide-darkbg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; } .slide-text-wrapper { z-index: 15; } .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-wrapper { z-index: 15; } .slide-letter{ top: 0px;left: 0px; font-size: 50vw; font-weight: 800; color: #000; z-index: 2; -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; } .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; } .slide-darkbg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83); } .cont .bg{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; background-position: 0px center, 0px center; background-size: cover; -webkit-filter: brightness(200%); filter: brightness(150%); } .bg-1{ background: url("./test-img/1.jpg") center center no-repeat; } .bg-2 { background: url("./test-img/2.jpg") center center no-repeat; } .bg-3 { background: url("./test-img/3.jpg") center center no-repeat; } .slide-darkbg-1{ left: 0%; } .slide-darkbg-2{ left: -50%; } .slide-darkbg-3 { left: -100%; } .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.animation, .slider div{ -webkit-transition: -webkit-transform 750ms ease-in-out; transition: transform 750ms ease-in-out; } .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: .1; } .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" id="cont"> <div class="slider trans-select"> <div class="slide slide-1" data-target="1"> <div class="slide-darkbg bg bg-1 slide-darkbg-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">专</div> <div class="slide-text">家</div> </div> </div> <div class="slide slide-2" data-target="2"> <div class="slide-darkbg bg bg-2 slide-darkbg-2"></div> <div class="slide-sty slide-text-wrapper"> <div class="slide-sty slide-letter bg bg-2 trans-select">全</div> <div class="slide-text">全</div> <div class="slide-text">面</div> <div class="slide-text">金</div> <div class="slide-text">融</div> </div> </div> <div class="slide slide-3" data-target="3"> <div class="slide-darkbg bg bg-3 slide-darkbg-3"></div> <div class="slide-sty slide-text-wrapper"> <div class="slide-sty slide-letter bg bg-3 trans-select">主</div> <div class="slide-text">自</div> <div class="slide-text">主</div> <div class="slide-text">研</div> <div class="slide-text">发</div> </div> </div> </div> <ul class="nav"> <li class="nav-slide nav-slide-1 nav-active" data-target="1"></li> <li class="nav-slide " data-target="2"></li> <li class="nav-slide " data-target="3"></li> </ul> <div data-target='right' class="side-nav side-nav--right"></div> <div data-target='left' class="side-nav side-nav--left"></div> </div> </body> <script src="js/jquery-1.11.3.js"></script> <script> 'use strict'; $(function(){ var numOfBanner= 3, // 轮播图个数 animSpd = 750; // 动画延迟时间 var toggleSlide=function(target){ $('.nav .nav-slide').removeClass('nav-active'); $('.nav li[data-target='+target+']').addClass('nav-active'); }; var slideBanner=function(target,direction){ var $slider = $('.slider'); $slider.addClass('animation'); $slider.css({ 'transform': 'translate3d(-' + (target - direction) * 100 + '%, 0, 0)' }); $slider.find('.slide-darkbg').css({ 'transform': 'translate3d(' + (target - direction) * 50 + '%, 0, 0)' }); $slider.find('.slide-letter').css({ 'transform': 'translate3d(0, 0, 0)' }); $slider.find('.slide-text').css({ 'transform': 'translate3d(0, 0, 0)' }); }; var navigateRight=function(curSlide){ if (curSlide >= numOfBanner) return; slideBanner(curSlide,0); setTimeout(()=>{}, animSpd); toggleSlide(curSlide+1); }; var navigateLeft=function(curSlide){ if (curSlide <= 1) return; slideBanner(curSlide,2); setTimeout(()=>{}, animSpd); toggleSlide(curSlide-1); }; $('#cont').on('click', '.nav-slide:not(.nav-active)', function () { var target =+$(this).attr('data-target'); //使用 + 将string 转换为number // console.log(typeof target,target); toggleSlide(target); slideBanner(target,1); }); $(document).on('click', '.side-nav', function () { var target = $(this).attr('data-target'); var curSlide=+$('.nav .nav-active').attr('data-target'); if (target === 'right') navigateRight(curSlide); if (target === 'left') navigateLeft(curSlide); }); }); </script> </html>