jQuery和CSS3类似PPT的演讲稿幻灯片插件

简要教程

这是一款简单的使用jQuery和CSS3制作类似PPT的演讲稿幻灯片插件。该演讲稿幻灯片插件可以通过键盘上下左右方向键来控制，并且左上角带有菜单按钮，通过菜单项可以选择相应的幻灯片页面。

查看演示       下载插件

使用方法

HTML结构

该演讲稿幻灯片的HTML结构有2个主要的部分：一个<nav>元素用于制作幻灯片的导航菜单，还有一个有序列表用于制作幻灯片页面。对于多级幻灯片页面使用的是嵌套有序列表的方法来制作。

<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样式

在小屏幕设备中(视口小于1100像素)，插件会将所有的幻灯片项目优化为一个列表。对于右子项目的幻灯片，插件中实现了一个可以触摸滑动的slider，优化可以滑动来查看显示子项目。

.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; }

带子项目的有序列表项的宽度使用JavaScript来设置。当用户从一个子项目导航到前一个或前一个子项目的时候，插件会沿X轴移动.sub-slides元素。

在大屏幕设备中，.cd-slideshow-wrapper元素的高度被设置为100vh，并设置为overflow:hidden，所以只有在视口中的幻灯片是可见的。然后.cd-slider-content元素被设置宽度、高度和margin使它相对于视口居中。

.visible class类用于添加到当前可见的幻灯片上：它的作用是隐藏.cd-slider-content::after伪元素(该伪元素用于在幻灯片聚焦时改变页面背景色)以及显示幻灯片的内容。

@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;   } }

当用户从一个幻灯片页面导航到另一个幻灯片页面时，插件会使用JavaScript沿Y轴移动.cd-slideshow元素。

JavaScript

该演讲稿幻灯片可以通过2中方式来移动：使用键盘方向键和使用导航菜单。

幻灯片的导航菜单功能通过2个主要的函数来实现：updateSlide函数用于从当前幻灯片导航到下一个或前一个幻灯片，updateSubSlide函数用于从当前幻灯片子项导航到前一个或下一个子项目。例如updateSubSlide函数的代码如下：

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+")";   // ... }

来源jQuery之家