js实现卡片式倾斜可拖放幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:js实现卡片式倾斜可拖放幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> html, body{ height: 100%; width: 100%; overflow: hidden; display: flex; margin: 0; } .lazy{ display: none; } body *, *:focus{ user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } body { background: #fafafa; } .sliderContainer{ display: flex; position: relative; max-height: 100%; height: 100%; width: 100%; top: 0; left: 0; margin: 0 auto; flex-wrap: wrap-reverse; overflow: hidden; } .controls{ position: relative; margin: 0 auto; display: flex; align-self: flex-end; font-size: 24px; letter-spacing: 5px; font-weight: bold; z-index: 99999; text-transform: uppercase; } .controls > div{ align-self: center; width: 100%; height: auto; text-align: center; padding: 1px 24px 5px 23px; cursor: pointer; margin: 0px 15px; background-color: transparent; color: #202020; transition: 0.3s; font-family: sans-serif; font-weight: 800; } .arrow{ background-color: #303030; width: 40px; border-radius: 30px; height: 3px; position: relative; } .arrow:before{ position: absolute; content: ""; background-color: inherit; width: 12px; border-radius: 30px; height: inherit; transform: rotate(40deg); display: inline-block; right: -3px; top: -3px; } .arrow:after{ position: absolute; content: ""; background-color: inherit; width: 12px; border-radius: 30px; height: inherit; transform: rotate(140deg); display: inline-block; right: -3px; top: 3px; } .prev-button, .next-button{ display: flex; flex-wrap: nowrap; } .prev-button *, .next-button *{ align-self: center; padding: 0px 8px; margin: 5px; transition: 0.6s; } .prev-button .arrow{ transform: scale(-1); } .prev-button:hover .arrow:before, .prev-button:hover .arrow:after{ width: 0px; transition: 0.2s; } .prev-button:hover .arrow{ width: 0px; transition: 0.4s; margin: 0; padding: 0; } .prev-button .hoverArrow:before, .prev-button .hoverArrow:after{ width: 0px; transition: 0.2s; } .prev-button .hoverArrow{ width: 0px; transition: 0.4s; margin: 0px; padding: 0px; } .prev-button:hover .hoverArrow:before, .prev-button:hover .hoverArrow:after{ width: 12px; transition: 0.2s; } .prev-button:hover .hoverArrow{ width: 40px; transition: 0.4s; margin: 5px; padding: 0 8px; } .next-button:hover .arrow:before, .next-button:hover .arrow:after{ width: 0px; transition: 0.2s; } .next-button:hover .arrow{ width: 0px; transition: 0.4s; margin: 0; padding: 0; } .next-button .hoverArrow:before, .next-button .hoverArrow:after{ width: 0px; transition: 0.2s; } .next-button .hoverArrow{ width: 0px; transition: 0.4s; margin: 0px; padding: 0px; } .next-button:hover .hoverArrow:before, .next-button:hover .hoverArrow:after{ width: 12px; transition: 0.2s; } .next-button:hover .hoverArrow{ width: 40px; transition: 0.4s; margin: 5px; padding: 0 8px; } .slider{ display: flex; text-align: center; margin: 0 auto; align-self: flex-start; position: relative; height: 90%; width: 100%; } .slider *{ transition: 0.3s; } .active-slide.slide{ max-height: 700px; height: 100%; } .slide{ max-height: 550px; max-width: 100%; height: 100%; } .slide img{ max-height: 100%; width: auto; height: auto; object-fit: cover; } .slide{ align-self: flex-end; pointer-events: none; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; opacity: 0; cursor: grab; transition: 0.2s cubic-bezier(0,.64,1,.94); overflow: hidden; } .grabbing *, .grabbing .active-slide{ cursor: grabbing !important; transition: none !important; } .prev-slide.slide, .next-slide.slide, .active-slide.slide{ pointer-events: all; } .prev-slide, .next-slide{ filter: blur(0.5px); } .prev-slide:hover, .next-slide:hover{ filter: blur(0px); } .prev-slide{ opacity: 0.6; left: 35%; } .prev-slide:hover{ transform: rotate(-16deg) translateX(-60%) translateY(-60%); opacity: 1; transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19); } .next-slide:hover{ transform: rotate(16deg) translateX(-37%) translateY(-40%); opacity: 1; transition: 0.3s cubic-bezier(0,-0.24,.17,-0.19); } .next-slide{ opacity: 0.6; left: 65%; } .active-slide{ box-shadow: 1px 2px 25px rgba(0,0,0,0.2); z-index: 99; left: 50%; opacity: 1; transition: 0.2s cubic-bezier(0,.64,1,.94); } @media screen and (max-width: 1366px){ .active-slide.slide{ max-height: 500px; } .slide{ max-height: 400px; } .controls{ font-size: 18px; } } @media screen and (max-width: 600px){ .prev-button p, .next-button p{ display: none; } } @media screen and (max-width: 480px){ .active-slide.slide{ max-height: 500px; } .slide{ max-height: 345px; } } @media screen and (max-width: 420px){ .active-slide.slide{ max-height: 450px; } .slide{ max-height: 345px; } } </style> <script> // Multiple event listener function addListenerMulti(element, eventNames, listener) { var events = eventNames.split(' '); for (var i=0, iLen=events.length; i<iLen; i++) { element.addEventListener(events[i], listener, false); } } addListenerMulti(window, 'click keydown touchstart touchmove', lazyLoad); // Run after the HTML document has finished loading function lazyLoad(){ // Get our lazy-loaded images var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); // Do this only if IntersectionObserver is supported if ("IntersectionObserver" in window) { // Create new observer object let lazyImageObserver = new IntersectionObserver(function(entries, observer) { // Loop through IntersectionObserverEntry objects entries.forEach(function(entry) { // Do these if the target intersects with the root if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove("lazy"); lazyImageObserver.unobserve(lazyImage); } else{ let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove("lazy"); lazyImageObserver.unobserve(lazyImage); } }); }); // Loop through and observe each image lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } } </script> </head> <body> <div class="sliderContainer"> <div class="controls"> <div class="prev-button"> <div class="arrow"></div> <p>Previous</p> <div class="arrow hoverArrow"></div> </div> <div class="next-button"> <div class="arrow hoverArrow"></div> <p>Next</p> <div class="arrow"></div> </div> </div> <div class="slider"> <div class="first-slide slide-0 slide prev-slide "> <img alt="Image Alt" src="//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png"> </div> <div class="active-slide slide-1 slide "> <img alt="Image Alt" src="//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png"> </div> <div class="next-slide slide-2 slide "> <img alt="Image Alt" src="//repo.bfw.wiki/bfwrepo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0