利用Jmpress.js打造华丽的3D幻灯片切换效果

[url=http://www.mxria.com/js/j201204161434.htm]利用Jmpress.js打造华丽的3D幻灯片切换效果[/url]
作者：realic 来源：mxria.com 时间：2012-04-16

[align=center]
[align=left]现在我们来看看CSS样式部分的内容，这部分内容只是实例，大家可以参考着根据自己的需要修改。为了使得幻灯片具有感应效果，我们给主容器jms-slideshow设置最大宽度和最小宽度

[align=left]接下来的包装层是动态添加的，这里用到了CSS3的一些状态变换效果。

[align=left]背景颜色的类将被应用到以前的包装。在类定义的的数据atrribute中设置每一个data-color。这使我们可以为每张幻灯片添加背景颜色和状态过渡。 （过渡期的持续时间将在JavaScript中被重新定义。）

[align=left]每个单一幻灯片的切换过渡时间定义为1s，当前显示的幻灯片opacity为1，而不显示的幻灯片opacity设置为0，这样我们看到的只有一个。

[align=left]下面对单个幻灯片里面的内容进行样式化设置，如下代码是针对内容设置的，大家可以随意更改为自己需要的内容。

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


Readmore的链接，我们在每个幻灯片切换完成时，使它过渡切换显示，使用了ease-in-out，增加点情趣，看看CSS3多风骚。img这时采用绝对定位的方式，


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;
}
.step img{
position: absolute;
right: 0px;
top: 30px;
}


接下来我们对用于导航的圆点进行样式化处理，也是绝对定位的方式，特别提醒就是z-index，一定设置较大值，使之始终显示在最前面


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


当前显示第几页，则第几个圆点显示出不同的颜色，下面定义当前幻灯圆点


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


我们使用:after伪元素来实现更加动态的效果，


.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%);
}


下面的内容是设置导航箭头的样式


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


关键的CSS样式定义完毕，接下来我们看看JavaScript代码，这是动起来的关键!

The JavaScript
我们使用jmpres.js这个Jquery插件来设计幻灯效果。这个插件功能很牛，但本例只用到其中很小一部分。如果你感兴趣希望了解jmpress.js更多的内容，可以参考[url=http://shama.github.com/jmpress.js/]jmpress.js文档[/url].

首先我们生成一个jquery插件，如下定义

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


在本例的插件中我们采用默认设置，options项为默认的。当然您也可以定制化options，参考[url=http://shama.github.com/jmpress.js/docs/#options]更多options[/url]



jmpressOpts : {
// 设置视野接口
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},


可以在插件本身中修改其中的参数，也可以定义一些幻灯效果的属性，例如:


// 定义jmpress 参数
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};

// 调用jmpress插件
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts :

jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));


下面提供了jmpress.js插件可用的一些幻灯显示参数:


$.JMSlideshow.defaults = {
// jmpress plugin的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
};


一旦jmpress插件调用，首先执行的方法函数是init


_init : function( options ) {

this.options = $.extend( true, {},

$.JMSlideshow.defaults, options );

// 加载幻灯页
this.$slides = $('#jms-slider').children('div');
// 幻灯片总数量
this.slidesCount = this.$slides.length;
// 背景色
this.colors = $.map( this.$slides, function( el,

i ) { return $( el ).data( 'color' ); } ).join( ' ' );
// 建立运行jmpress的基本布局
this._layout();
// 初始化jmpress插件
this._initImpress();
// if support (function implemented in jmpress plugin)
if( this.support ) {

// load some events
this._loadEvents();
// 如果autoplay设置为true，则开始自动显示幻灯页
if( this.options.autoplay ) {

this._startSlideshow();

}

}

},


在_layout()函数中，jmpress会加载一些基本的幻灯结构，包括导航、左右的箭头等


_layout : function() {

// adds a specific class to each one of the steps
this.$slides.each( function( i ) {

$(this).addClass( 'jmstep' + ( i + 1 ) );

} );

// 包装幻灯页. 包装器就是调用jmpress plugin的元素
this.$jmsWrapper = this.$slides.wrapAll( '

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

// 增加导航箭头
if( this.options.arrows ) {

this.$arrows = $( '' );

if( this.slidesCount > 1 ) {

this.$arrowPrev = $( '
prev"/>' ).appendTo( this.$arrows );
this.$arrowNext = $( '
next"/>' ).appendTo( this.$arrows );

}

this.$el.append( this.$arrows )

}

// 增加导航指示的圆点
if( this.options.dots ) {

this.$dots = $( ''

);

for( var i = this.slidesCount + 1; --i; ) {

this.$dots.append( ( i === this.slidesCount ) ?

'' : '' );

}

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 )

}

},


我们在_initImpress函数中初始化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;

}

// 重新定义jmpress中的setActive方法
this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData )

{

// 改变当前激活页得圆点类
if( _self.options.dots ) {

// 未当前页设置导航圆点
_self.$dots
.children()
.removeClass( 'jms-dots-current' )
.eq( slide.index() )
.addClass( 'jms-dots-current' );

}

// 删除当前所有的颜色
this.removeClass( _self.colors );
// 增加一个color类
this.addClass( slide.data( 'color' ) );

} );

// 添加幻灯页step的包装类
this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data(

'color' ) );

},


autoplay为true设置为自动播放时，_startSlideshow和_stopSlideshow是开始和停止幻灯展示的方法


// 开始幻灯显示 autoplay：true
_startSlideshow : function() {

var _self = this;

this.slideshow = setTimeout( function() {

_self.$jmsWrapper.jmpress( 'next' );

if( _self.options.autoplay ) {

_self._startSlideshow();

}

}, this.options.interval );

},
// 停止slideshow
_stopSlideshow : function() {

if( this.options.autoplay ) {

clearTimeout( this.slideshow );
this.options.autoplay = false;

}

},


最后，我们在导航箭头和圆点上加载event事件。注意touchend event已经在jmpress plugin定义好了,当事件触发时，我们需要定义使之停止幻灯显示的动作



_loadEvents : function() {

var _self = this;

// 导航箭头事件
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;

} );

}

// 导航圆点事件
if( this.$dots ) {

this.$dots.children().on( 'click.jmslideshow', function(

event ) {

_self._stopSlideshow();

_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + (

$(this).index() + 1 ) );

return false;

} );

}

// touchend已经定义在jmpress插件中，我们只需要将其跟停止显示函数_stopSlideshow进行关联.
this.$jmsWrapper.on( 'touchend.jmslideshow', function() {

_self._stopSlideshow();

} );

}


Demo展示：[url=http://tympanus.net/Tutorials/SlideshowJmpress/index.html]http://tympanus.net/Tutorials/SlideshowJmpress/index.html[/url]

英语原文地址：[url=http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/]http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/[/url]