html项目演讲ppt,jQuery和CSS3类似PPT的演讲稿幻灯片插件

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

使用方法

HTML结构

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

Open Navigation

1. Slide 1

2. Slide 2

   1. Slide 2 - Sub 1
3. Slide 3

1. Presentation Slideshow

   A simple presentation template in CSS & jQuery.

2. 1. Slider #2

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

// ...

}