幻灯片/轮播

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

创客主机


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

HTML结构:

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

  1. <div class="cd-slideshow-wrapper">
  2.   <nav class="cd-slideshow-nav">
  3.     <button class="cd-nav-trigger">
  4.       Open Navigation
  5.       <span aria-hidden="true"></span>
  6.     </button>
  7.  
  8.     <div class="cd-nav-items">
  9.       <ol>
  10.         <li><a href="#slide-1">Slide 1</a></li>
  11.         <li>
  12.           <a href="#slide-2">Slide 2</a>
  13.           <ol class="sub-nav">
  14.             <li><a href="#slide-2">Slide 2 - Sub 1</a></li>
  15.             <!-- other sub-slide links here -->
  16.           </ol>
  17.         </li>
  18.         <li><a href="#slide-3">Slide 3</a></li>
  19.         <!-- other slide links here -->
  20.       </ol>
  21.     </div> <!-- .cd-nav-items -->
  22.   </nav> <!-- .cd-slideshow-nav -->
  23.  
  24.   <ol class="cd-slideshow">
  25.     <li class="visible" id="slide-1">
  26.       <div class="cd-slider-content">
  27.         <div class="content-wrapper">
  28.           <h2>Presentation Slideshow</h2>
  29.           <p>A simple presentation template in CSS & jQuery.</p>
  30.         </div>
  31.       </div>
  32.     </li>
  33.  
  34.     <li id="slide-2">
  35.       <ol class="sub-slides">
  36.         <li>
  37.           <div class="cd-slider-content">
  38.             <div class="content-wrapper">
  39.               <h2>Slider #2</h2>
  40.             </div>
  41.           </div>
  42.         </li>
  43.         <!-- sub-slides content here -->
  44.  
  45.       </ol> <!-- .sub-slides -->
  46.     </li>
  47.  
  48.     <!-- additional slides here -->
  49.   </ol> <!-- .cd-slideshow -->
  50. </div> <!-- .cd-slideshow-wrapper -->

CSS样式:

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

  1. .cd-slideshow .sub-slides {
  2.   width: 100%;
  3.   transition: transform 0.3s;
  4. }
  5. .cd-slideshow > li, 
  6. .cd-slideshow .sub-slides > li {
  7.   position: relative;
  8.   z-index: 1;
  9.   height: 100vh;
  10.   width: 100vw;
  11. }
  12. .cd-slideshow .sub-slides > li {
  13.   float: left;
  14. }

带子项目的有序列表项的宽度使用JavaScript来设置。当用户从一个子项目导航到前一个或前一个子项目的时候,插件会沿X轴移动.sub-slides元素。在大屏幕设备中,.cd-slideshow-wrapper元素的高度被设置为100vh,并设置为overflow:hidden,所以只有在视口中的幻灯片是可见的。然后.cd-slider-content元素被设置宽度、高度和margin使它相对于视口居中。.visible class类用于添加到当前可见的幻灯片上:它的作用是隐藏.cd-slider-content::after伪元素(该伪元素用于在幻灯片聚焦时改变页面背景色)以及显示幻灯片的内容。

  1. @media only screen and (min-width: 1100px) {
  2.   .cd-slideshow-wrapper {
  3.     height: 100vh;
  4.     overflow: hidden;
  5.   }
  6.  
  7.   .cd-slideshow {
  8.     transition: transform 0.6s;
  9.   }
  10.   .cd-slideshow > li, .cd-slideshow .sub-slides > li {
  11.     height: auto;
  12.     width: auto;
  13.   }
  14.  
  15.   .cd-slider-content {
  16.     height: 84vh;
  17.     width: 90vw;
  18.     margin: 2vh 5vw;
  19.     border-radius: 10px;
  20.     cursor: pointer;
  21.   }
  22.   .visible .sub-visible .cd-slider-content, 
  23.   .visible > .cd-slider-content {
  24.     /* visible slide */
  25.     cursor: auto;
  26.   }
  27.   .cd-slideshow > li:first-of-type .cd-slider-content {
  28.     margin-top: 8vh;
  29.   }
  30.   .sub-slides > li:first-of-type .cd-slider-content {
  31.     margin-left: 5vw;
  32.   }
  33.   .sub-slides > li .cd-slider-content {
  34.     margin-left: 1.25vw;
  35.     margin-right: 1.25vw;
  36.   }
  37.   .cd-slider-content .content-wrapper {
  38.     height: 100%;
  39.     /* hide the slide content if the slide is not selected/visible */
  40.     opacity: 0;
  41.     box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  42.     border-radius: inherit;
  43.     transition: opacity 0.6s;
  44.   }
  45.   .cd-slider-content::after {
  46.     /* this is used to change the slide background color when the slide is out of focus */
  47.     content: '';
  48.     position: absolute;
  49.     z-index: 3;
  50.     top: 0;
  51.     left: 0;
  52.     height: 100%;
  53.     width: 100%;
  54.     border-radius: inherit;
  55.     background-color: #3a3a3a;
  56.     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  57.     opacity: 1;
  58.     visibility: visible;
  59.     transition: opacity 0.6s, visibility 0.6s;
  60.   }
  61.   .visible .cd-slider-content .content-wrapper {
  62.     opacity: 1;
  63.   }
  64.   .visible .cd-slider-content::after {
  65.     opacity: 0;
  66.     visibility: hidden;
  67.   }
  68. }

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

JavaScript:

该演讲稿幻灯片可以通过2中方式来移动:使用键盘方向键和使用导航菜单。幻灯片的导航菜单功能通过2个主要的函数来实现:updateSlide函数用于从当前幻灯片导航到下一个或前一个幻灯片,updateSubSlide函数用于从当前幻灯片子项导航到前一个或下一个子项目。例如updateSubSlide函数的代码如下:

  1. function updateSubSlide(listItem, string, subSlide) {
  2.   var translate,
  3.     marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', ''))*6,
  4.     windowWidth = window.innerWidth;
  5.  
  6.   windowWidth = ( mq == 'desktop' ) ? windowWidth - marginSlide : windowWidth;
  7.  
  8.   if( listItem.children('.sub-slides').length > 0 ) {
  9.     var subSlidesWrapper = listItem.children('.sub-slides'),
  10.       visibleSubSlide = subSlidesWrapper.children('.sub-visible');
  11.  
  12.     if( string == 'nav' ) {
  13.       /* we have choosen a new slide from the navigation */
  14.       var newSubSlide = subSlide;
  15.     } else {
  16.       var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev();
  17.     }
  18.     var newSubSlidePosition = newSubSlide.index();
  19.     translate = parseInt(- newSubSlidePosition*windowWidth);
  20.     setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px');
  21.     visibleSubSlide.removeClass('sub-visible');
  22.     newSubSlide.addClass('sub-visible');
  23.   }
  24. }
  25.  
  26. function setTransformValue(element, property, value) {
  27.   element.style["-webkit-transform"] = property+"("+value+")";
  28.   element.style["-moz-transform"] = property+"("+value+")";
  29.   element.style["-ms-transform"] = property+"("+value+")";
  30.   element.style["-o-transform"] = property+"("+value+")";
  31.   element.style["transform"] = property+"("+value+")";
  32.   // ...
  33. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!