简介:
尽管演示幻灯片通常被应用在应用程序APP中,但是我们挑战自我,为桌面浏览器创建了一款演示幻灯片效果,这不是一件容易的事。
这个效果怎么操作呢?最简单的方法是使用键盘上的方向键。
HTML结构:
<div class="cd-slideshow-wrapper"> <nav class="cd-slideshow-nav"> <button class="cd-nav-trigger"> Open Navigation <span aria-hidden="true"> </span> </button> <div class="cd-nav-items"> <ol> <li> <a href="#slide-1"> Slide 1 </a> </li> <li> <a href="#slide-2"> Slide 2 </a> <ol class="sub-nav"> <li> <a href="#slide-2"> Slide 2 - Sub 1 </a> </li> <!-- other sub-slide links here --> </ol> </li> <li> <a href="#slide-3"> Slide 3 </a> </li> <!-- other slide links here --> </ol> </div> <!-- .cd-nav-items --> </nav> <!-- .cd-slideshow-nav --> <ol class="cd-slideshow"> <li class="visible" id="slide-1"> <div class="cd-slider-content"> <div class="content-wrapper"> <h2> Presentation Slideshow </h2> <p> A simple presentation template in CSS & jQuery. </p> </div> </div> </li> <li id="slide-2"> <ol class="sub-slides"> <li> <div class="cd-slider-content"> <div class="content-wrapper"> <h2> Slider #2 </h2> </div> </div> </li> <!-- sub-slides content here --> </ol> <!-- .sub-slides --> </li> <!-- additional slides here --> </ol> <!-- .cd-slideshow --> </div> <!-- .cd-slideshow-wrapper -->
主要CSS代码:
.cd-slideshow .sub-slides { width: 100%; transition: transform 0.3s; } .cd-slideshow > li, .cd-slideshow .sub-slides > li { position: relative; z-index: 1; height: 100vh; width: 100vw; } .cd-slideshow .sub-slides > li { float: left; }
@media only screen and (min-width: 1100px) { .cd-slideshow-wrapper { height: 100vh; overflow: hidden; } .cd-slideshow { transition: transform 0.6s; } .cd-slideshow > li, .cd-slideshow .sub-slides > li { height: auto; width: auto; } .cd-slider-content { height: 84vh; width: 90vw; margin: 2vh 5vw; border-radius: 10px; cursor: pointer; } .visible .sub-visible .cd-slider-content, .visible > .cd-slider-content { /* visible slide */ cursor: auto; } .cd-slideshow > li:first-of-type .cd-slider-content { margin-top: 8vh; } .sub-slides > li:first-of-type .cd-slider-content { margin-left: 5vw; } .sub-slides > li .cd-slider-content { margin-left: 1.25vw; margin-right: 1.25vw; } .cd-slider-content .content-wrapper { height: 100%; /* hide the slide content if the slide is not selected/visible */ opacity: 0; box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); border-radius: inherit; transition: opacity 0.6s; } .cd-slider-content::after { /* this is used to change the slide background color when the slide is out of focus */ content: ''; position: absolute; z-index: 3; top: 0; left: 0; height: 100%; width: 100%; border-radius: inherit; background-color: #3a3a3a; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); opacity: 1; visibility: visible; transition: opacity 0.6s, visibility 0.6s; } .visible .cd-slider-content .content-wrapper { opacity: 1; } .visible .cd-slider-content::after { opacity: 0; visibility: hidden; } }
主要事件实现代码:
function updateSubSlide(listItem, string, subSlide) { var translate, marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', '')) * 6, windowWidth = window.innerWidth; windowWidth = (mq == 'desktop') ? windowWidth - marginSlide: windowWidth; if (listItem.children('.sub-slides').length > 0) { var subSlidesWrapper = listItem.children('.sub-slides'), visibleSubSlide = subSlidesWrapper.children('.sub-visible'); if (string == 'nav') { /* we have choosen a new slide from the navigation */ var newSubSlide = subSlide; } else { var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev(); } var newSubSlidePosition = newSubSlide.index(); translate = parseInt( - newSubSlidePosition * windowWidth); setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px'); visibleSubSlide.removeClass('sub-visible'); newSubSlide.addClass('sub-visible'); } } function setTransformValue(element, property, value) { element.style["-webkit-transform"] = property + "(" + value + ")"; element.style["-moz-transform"] = property + "(" + value + ")"; element.style["-ms-transform"] = property + "(" + value + ")"; element.style["-o-transform"] = property + "(" + value + ")"; element.style["transform"] = property + "(" + value + ")"; // ... }
- 评论