带有jmpress.js的幻灯片

View demo 查看演示 Download Source 下载源

You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

您肯定已经看过impress.js ，这是一个非常出色JavaScript库，用于创建非凡的3D演示文稿。 jQuery端口jmpress.js让您将该库用作带有某些添加选项的jQuery插件。 我们今天要向您展示如何使用这个出色的插件来创建具有3D效果的自适应幻灯片。

The icons used in the demo is by Artcore Illustration and they are licensed under the Creative Commons BY-NC-ND 3.0 license.

演示中使用的图标由Artcore Illustration提供，并已根据Creative Commons BY-NC-ND 3.0许可获得许可。

So, let’s start!

所以，让我们开始吧！

标记 (The Markup)

We will have a main container which is a section with the class jms-slideshow. Inside, we’ll have sevaral divisions with the class step. These will be our single slides. Each step or slide will get a data-color class for it’s background color and some data attributes of jmpress.js. You can find all (inline) options here: jmpress.js Documentation – Options. We’ll use some attributes in order to define the position and rotation of the slides in 3D space:

我们将有一个主容器，该容器是类jms-slideshow的一部分。 在内部，我们将在class step上进行部分划分。 这些将是我们的单张幻灯片。 每个步骤或幻灯片都会为其背景色和jmpress.js的某些数据属性获得一个data-color类。 您可以在这里找到所有(内联)选项： jmpress.js文档–选项。 我们将使用一些属性来定义幻灯片在3D空间中的位置和旋转：

<section id="jms-slideshow" class="jms-slideshow">

	<div class="step" data-color="color-1">
		<div class="jms-content">
			<h3>Some headline</h3>
			<p>Some text</p>
			<a class="jms-link" href="#">Read more</a>
		</div>
		<img src="images/1.png" />
	</div>
	
	<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
		<!-- ... -->
	</div>
	
	<!-- ... -->
	
</section>

Let’s take care of the style.

让我们照顾一下样式。

CSS (The CSS)

Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values:

由于我们想使幻灯片响应，因此我们将给主容器一个百分比宽度，并带有一些最小值和最大值：

.jms-slideshow {
	position: relative;
	width: 80%;
	max-width: 1400px;
	min-width: 640px;
	margin: 20px auto;
	height: 460px;
}

The next wrapper is dynamically added, and this will be the visible slideshow wrapper:

动态添加下一个包装，这将是可见的幻灯片包装：

.jms-wrapper {
	width: auto;
	min-width: 600px;
	height: 440px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	-webkit-background-clip: padding;
	-moz-background-clip: padding;     
	background-clip: padding-box;
	border: 10px solid #fff;
	border: 10px solid rgba(255, 255, 255, 0.9);
	outline: none;
	transition: background-color 1s linear;
}

The background color classes will be applied to the previous wrapper. The class is defined in the data atrribute data-color in each step. This gives us the possibility to add a background color for each slide and change it with a transition. (The duration of the transition will be re-defined in the JavaScript.)

背景颜色类别将应用于先前的包装器。 在每个步骤中，在数据属性data-color中定义该类。 这使我们可以为每张幻灯片添加背景色并通过过渡对其进行更改。 (过渡的持续时间将在JavaScript中重新定义。)

.color-1 {
	background-color: #E3D8FF;
	background-color: rgba(227, 216, 268, 1);
}
.color-2 {
	background-color: #EBBBBC;
	background-color: rgba(235, 187, 188, 1);
}
.color-3 {
	background-color: #EED9C0;
	background-color: rgba(238, 217, 192, 1);
}
.color-4 {
	background-color: #DFEBB1;
	background-color: rgba(223, 235, 177, 1);
}
.color-5{
	background-color: #C1E6E5;
	background-color: rgba(193, 230, 229, 1);
}

The steps will have the following style:

这些步骤将具有以下样式：

.step {	
	width: 900px;
    height: 420px;
	display: block;
	transition: opacity 1s;
}
.step:not(.active) {
	opacity: 0;
}

Inactive steps will have 0 opacity. When the slides are moved, the opacity will be set to 1.

不活动的步骤将具有0不透明度。 移动幻灯片时，不透明度将设置为1。

The inner parts of the slides will have the following style:

幻灯片的内部将具有以下样式：

.jms-content{
	margin: 0px 370px 0px 20px;
	position: relative;
	clear: both;
}
.step h3{
	color: #fff;
	font-size: 52px;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	margin: 0;
	padding: 60px 0 10px 0;
}
.step p {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 34px;
	font-weight: normal;
	position: relative;
	margin: 0;
}

The “read more” link will have a little transition by itself: once a step becomes active, it will move up wile fading in:

“阅读更多”链接本身将有一点过渡：一旦激活某个步骤，它将在以下过程中逐渐消失：

a.jms-link{
	color: #fff;
	text-transform: uppercase;
	background: linear-gradient(top, #969696 0%,#727272 100%); 
	padding: 8px 15px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border: 1px solid #444;
	border-radius: 4px;
	opacity: 1;
	margin-top: 40px;
	clear: both;
	transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
	opacity: 0;
	margin-top: 80px;
}

The image will be positioned absolutely on the right side of each slide:

图像将绝对位于每张幻灯片的右侧：

.step img{
	position: absolute;
	right: 0px;
	top: 30px;
}

The navigation dots will positioned at the bottom:

导航点将位于底部：

.jms-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 20px;
	z-index: 2000;
	user-select: none;
}

With “user-select: none” the text of an element and its sub-elements will appear as if they can’t be selected. The span will be a dark little dot:

使用“用户选择：无”，将显示元素及其子元素的文本，就像无法选择它们一样。 跨度将是一个黑暗的小点：

.jms-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #777;
	margin: 3px;
	cursor: pointer;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.3);
}

And we’ll style a pseudo-element to look like a little white dot:

然后，我们将伪元素设置为看起来像一个小白点的样式：

.jms-dots span.jms-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

The arrow navigation spans will be positioned on the left and on the right side of the slideshow. We’ll use background images for the arrows:

箭头导航范围将定位在幻灯片的左侧和右侧。 我们将使用背景图像作为箭头：

.jms-arrows{
	user-select: none;
}
.jms-arrows span{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	height: 80px;
	width: 30px;
	cursor: pointer;
	z-index: 2000;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
	background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
	left: -10px;
}
.jms-arrows span.jms-arrows-next{
	background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
	right: -10px;
}

Now we have styled the slideshow. Let’s move on to the JavaScript!

现在，我们已经设置了幻灯片的样式。 让我们继续学习JavaScript！

JavaScript (The JavaScript)

We will be using the jmpress.js plugin to create our slideshow. Although you can make use of a lot of its functionality, we will just use the necessary parts to build our script. You can read more about the possibilities and options that jmpress.js offers here.

我们将使用jmpress.js插件来创建幻灯片。 尽管您可以利用其许多功能，但是我们仅使用必要的部分来构建脚本。 您可以在此处阅读更多有关jmpress.js提供的可能性和选项的信息。

We will create a jQuery plugin for the slideshow. We can call the plugin like this:

我们将为幻灯片创建一个jQuery插件。 我们可以这样称呼插件：

	
$( '#jms-slider' ).jmslideshow();

The options for the jmpress plugin are defined as default options in our plugin (note that you can specify more than the ones listed):

jmpress插件的选项在我们的插件中被定义为默认选项(请注意，您可以指定的数量比列出的更多)：

jmpressOpts	: {
	// set the viewport
	viewPort 		: {
		height	: 400,
		width	: 1300,
		maxScale: 1
	},
	fullscreen		: false,
	hash			: { use : false },
	mouse			: { clickSelects : false },
	keyboard		: { use : false },
	animation		: { transitionDuration : '1s' }
},

You can either change them inside the slideshow plugin, or pass a specific value when you initialize the plugin. As an example:

您可以在幻灯片插件中更改它们，也可以在初始化插件时传递特定值。 举个例子：

// specify the jmpress options
var jmpressOpts	= {
	animation		: { transitionDuration : '0.8s' }
};

// call the jmslideshow plugin
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
	autoplay	: true,
	bgColorSpeed: '0.8s',
	arrows		: false
}));

The following are the set of available options that are available for the slideshow plugin:

以下是可用于幻灯片演示插件的一组可用选项：

$.JMSlideshow.defaults 		= {
	// options for the jmpress plugin.
	// you can add more options...
	jmpressOpts	: {
		// set the viewport
		viewPort 		: {
			height	: 400,
			width	: 1300,
			maxScale: 1
		},
		fullscreen		: false,
		hash			: { use : false },
		mouse			: { clickSelects : false },
		keyboard		: { use : false },
		animation		: { transitionDuration : '1s' }
	},
	// for this specific plugin we will have the following options:
	// shows/hides navigation arrows
	arrows		: true,
	// shows/hides navigation dots/pages
	dots		: true,
	// each step's bgcolor transition speed
	bgColorSpeed: '1s',
	// slideshow on / off
	autoplay	: false,
	// time between transitions for the slideshow
	interval	: 3500
};

Once the slideshow plugin is called, the first function to be executed is the init function:

调用幻灯片插件后，要执行的第一个函数是init函数：

_init : function( options ) {
			
	this.options 		= $.extend( true, {}, $.JMSlideshow.defaults, options );
	
	// the slides
	this.$slides		= $('#jms-slider').children('div');
	// total number of slides
	this.slidesCount	= this.$slides.length;
	// step's bgcolor
	this.colors			= $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
	// build the necessary structure to run jmpress
	this._layout();
	// initialize the jmpress plugin
	this._initImpress();
	// if support (function implemented in jmpress plugin)
	if( this.support ) {
	
		// load some events
		this._loadEvents();
		// if autoplay is true start the slideshow
		if( this.options.autoplay ) {
		
			this._startSlideshow();
		
		}
		
	}
	
},

In the _layout function we are building the necessary structure for the jmpress plugin. Also, we will be adding the navigation arrows / dots in case these are set to true in the options.

在_layout函数中，我们正在为jmpress插件构建必要的结构。 另外，如果在选项中将其设置为true，我们将添加导航箭头/点。

_layout				: function() {
			
	// adds a specific class to each one of the steps
	this.$slides.each( function( i ) {
	
		$(this).addClass( 'jmstep' + ( i + 1 ) );
	
	} );
	
	// wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
	this.$jmsWrapper	= this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();
	
	// transition speed for the wrapper bgcolor 
	this.$jmsWrapper.css( {
		'-webkit-transition-duration' 	: this.options.bgColorSpeed,
		'-moz-transition-duration' 		: this.options.bgColorSpeed,
		'-ms-transition-duration' 		: this.options.bgColorSpeed,
		'-o-transition-duration' 		: this.options.bgColorSpeed,
		'transition-duration' 			: this.options.bgColorSpeed
	} );
	
	// add navigation arrows
	if( this.options.arrows ) {
	
		this.$arrows	= $( '<nav class="jms-arrows"/>' );
		
		if( this.slidesCount > 1 ) {
		
			this.$arrowPrev	= $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
			this.$arrowNext	= $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );
			
		}

		this.$el.append( this.$arrows )
	
	}
	
	// add navigation dots
	if( this.options.dots ) {
	
		this.$dots		= $( '<nav class="jms-dots"/>' );
		
		for( var i = this.slidesCount + 1; --i; ) {
		
			this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );
		
		}
		
		if( this.options.jmpressOpts.start ) {
			
			this.$start		= this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;
			
			( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;
			
			this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
		
		}
		
		this.$el.append( this.$dots )
	
	}
	
},

We will initialize the jmpress plugin in the _initImpress function. We will also redefine the “setActive” method of jmpress in order to switch the active navigation dot.

我们将在_initImpress函数中初始化jmpress插件。 我们还将重新定义jmpress的“ setActive”方法，以切换活动的导航点。

_initImpress		: function() {
			
	var _self = this;
	
	this.$jmsWrapper.jmpress( this.options.jmpressOpts );
	// check if supported (function from jmpress.js):
	// it adds the class not-suported to the wrapper
	this.support	= !this.$jmsWrapper.hasClass( 'not-supported' );
	
	// if not supported remove unnecessary elements
	if( !this.support ) {
	
		if( this.$arrows ) {
		
			this.$arrows.remove();
		
		}
		
		if( this.$dots ) {
		
			this.$dots.remove();
		
		}
		
		return false;
	
	}
	
	// redefine the jmpress setActive method
	this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {
		
		// change the pagination dot active class			
		if( _self.options.dots ) {
			
			// adds the current class to the current dot/page
			_self.$dots
				 .children()
				 .removeClass( 'jms-dots-current' )
				 .eq( slide.index() )
				 .addClass( 'jms-dots-current' );
		
		}
		
		// delete all current bg colors
		this.removeClass( _self.colors );
		// add bg color class
		this.addClass( slide.data( 'color' ) );
		
	} );
	
	// add step's bg color to the wrapper
	this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );
	
},

The _startSlideshow and _stopSlideshow will start and stop the slideshow respectively if the option autoplay is set to true.

如果将自动播放选项设置为true，则_startSlideshow和_stopSlideshow将分别开始和停止幻灯片放映。

// start slideshow if autoplay is true
	_startSlideshow		: function() {
	
		var _self	= this;
		
		this.slideshow	= setTimeout( function() {
			
			_self.$jmsWrapper.jmpress( 'next' );
			
			if( _self.options.autoplay ) {
			
				_self._startSlideshow();
			
			}
		
		}, this.options.interval );
	
	},
	// stops the slideshow
	_stopSlideshow		: function() {
	
		if( this.options.autoplay ) {
				
			clearTimeout( this.slideshow );
			this.options.autoplay	= false;
		
		}
	
	},

Finally, we load the events for the navigation arrows and dots. The touchend event is already defined in the jmpress plugin, but we will need to stop the slideshow in case this event is triggered:

最后，我们为导航箭头和点加载事件。 touchend事件已经在jmpress插件中定义，但是如果触发此事件，我们将需要停止幻灯片放映：

_loadEvents			: function() {
			
	var _self = this;
	
	// navigation arrows
	if( this.$arrowPrev && this.$arrowNext ) {
	
		this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
			
			_self._stopSlideshow();
		
			_self.$jmsWrapper.jmpress( 'prev' );

			return false;
		
		} );
		
		this.$arrowNext.on( 'click.jmslideshow', function( event ) {
			
			_self._stopSlideshow();
			
			_self.$jmsWrapper.jmpress( 'next' );
			
			return false;
		
		} );
		
	}
	
	// navigation dots
	if( this.$dots ) {
	
		this.$dots.children().on( 'click.jmslideshow', function( event ) {
			
			_self._stopSlideshow();
			
			_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );
			
			return false;
		
		} );
	
	}
	
	// the touchend event is already defined in the jmpress plugin.
	// we just need to make sure the slideshow stops if the event is triggered
	this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
	
		_self._stopSlideshow();
	
	} );
	
}

And that’s it! I hope you enjoyed this tutorial and find it useful!

就是这样！ 我希望您喜欢本教程并发现它有用！

翻译自: https://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/