幻灯片/轮播

fractionslider - 带多重动画效果jQuery幻灯片插件

创客主机


fractionslider是一款可以实现多重动画效果的jQuery幻灯片插件。该幻灯片插件的每一个slide中都可以制作多个元素动画,每一个元素可以有不同的运动方向和运动速度,并且该幻灯片插件还是响应式的。它的特点还有:

每个slide中不限制动画元素的个数

元素动画可以设置不同的动画过渡效果

不限制幻灯片的数量

所有的动画元素都可以被控制

兼容IE8+的所有现代浏览器

使用方法:

使用该幻灯片插件需要在页面中引入jquery,jquery.fractionslider.js和fractionslider.css文件。

  1. <link rel="stylesheet" href="css/fractionslider.css">
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.fractionslider.js"></script>

HTML结构:

在该幻灯片的HTML结构中,每一个div.slide元素是一个幻灯片页面,在每一个slide中,可以组合多个图片和文本段落元素。

  1. <div class="slider">
  2.   <div class="slide"> 
  3.   <img src="images/01_box_top.png" width="361" height="354"
  4.             data-position="-152,142" data-in="left" data-delay="200"> 
  5.  
  6.   <img src="images/01_box_bottom.png" width="422" height="454"
  7.             data-position="138,-152" data-in="bottomLeft" data-delay="200"> 
  8.  
  9.   <img src="images/01_waves.png" width="1449" height="115"
  10.             data-position="240,17" data-in="left" data-delay="">
  11.  
  12.   <p data-position="30,30" data-in="top" data-step="1" data-speed="500"
  13.      data-out="top" data-ease-in="easeOutBounce">jQuery Fraction Slider</p>
  14.  
  15.   <p data-position="90,30" data-in="left" data-step="2" data-speed="500"
  16.       data-delay="500">animate multiple elements</p>
  17.  
  18.   <p data-position="90,30" data-in="left" data-step="2" data-special="cycle"
  19.      data-speed="500" data-delay="3000">full control over each element</p>
  20.  
  21.   <p data-position="90,30" data-in="left" data-step="2"
  22.   data-special="cycle" data-speed="500" data-delay="4500">opensource and free</p>
  23.  
  24.   <img src="images/01_outofthebox.png" width="652" height="559"
  25.             data-position="20,330" data-in="bottomLeft" data-delay="500"> 
  26.   </div>
  27.   ......
  28. </div>

其中,data-*属性的含义为:

data-in:控制元素的进入方向

data-position:元素的位置

data-delay:元素动画的延迟时间

data-speed:动画的速度

data-step:元素动画执行的先后顺序

data-special:执行特殊的动画

初始化插件:

在页面DOM元素加载完毕之后,可以通过fractionSlider()方法来初始化该幻灯片插件。

  1. $(window).load(function(){
  2.   $('.slider').fractionSlider({
  3.     'fullWidth': true // Full width, true of false
  4.   });
  5. });

配置参数:

该幻灯片插件的配置参数有:

参数默认值描述
slideTransition'none'幻灯片的动画过渡效果
slideTransitionSpeed2000幻灯片的动画过渡持续时间
slideEndAnimationtrue如果设置为true,元素会在slideTransition参数调用之前出现在slide的末尾
position'0,0'元素默认的位置
transitionIn'left'默认的进入动画
transitionOut'left'默认的离开动画
fullWidthfalse是否占据整个屏幕的宽度
delay0元素动画的延迟时间
timeout2000幻灯片切换的间隔时间
speedIn2500in动画过渡的速度
speedOut2000out动画过渡的速度
easeIn'easeOutExpo'默认的easing in效果
'easeOut''easeOutCubic'默认的easing out效果
controlsfalse是否显示控制按钮
pagerfalse是否显示分页按钮
autoChangetrue是否自动播放
pauseOnHoverfalse是否在鼠标滑过是停止自动播放
backgroundAnimationfalse是否使用背景动画
backgroundElementnull默认的fractionSlider动画元素
backgroundX500X方向的距离
backgroundY500Y方向的距离
backgroundSpeed2500背景动画的速度
responsivefalse是否启用响应式幻灯片设计
increasefalseif set, slider is allowed to get bigger than basic dimensions
dimensions''为响应式幻灯片设置基本的尺寸(宽度和高度,单位像素)。插件会将元素放置爱data-position属性指定位置的相对位置

回调函数:

startCallback:幻灯片开始播放时触发

startNextSlideCallback:开始下一个slide时触发

stopCallback:停止播放幻灯片时触发

pauseCallback:暂停播放幻灯片时触发

resumeCallback:恢复播放幻灯片时触发

nextSlideCallback:跳转到下一个slede时触发

prevSlideCallback:跳转到前一个slede时触发

pagerCallback:使用分页导航时触发

(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!