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