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

jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:01:15

Original

1638 people have browsed it

简要教程

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

查看演示 下载插件

使用方法

HTML结构

该演讲稿幻灯片的HTML结构有2个主要的部分：一个

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

Copy after login

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

Copy after login

带子项目的有序列表项的宽度使用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;  }}

Copy after login

当用户从一个幻灯片页面导航到另一个幻灯片页面时，插件会使用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+")";  // ...}

Copy after login

来源jQuery之家