带视觉差的轮播图
?
?最終結果：
?
?
?
代碼：
<!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>?
轉載于:https://www.cnblogs.com/web-fusheng/p/6807495.html
總結
- 上一篇： 代码 拉取_Git 利用 Webhook
- 下一篇： 电子计算机入门教程,「冯修远」计算机入门