🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

pocketHorse is a jQuery plugin for making an automatic image carousel slider with 6 built-in advanced transition effects based on CSS3 and jQuery animate() method.

Carousel Image-Slider

Documentation

pocketHorse

jquery动画轮播插件,内置六种转场方式,包括三种高级模式

###homepage pocketHorse.

####使用方法:

$('selector').pocketHorse(option[,imageSrc]);

####动画参数option

dotControl : true | false 是否启用点阵控制

blockControl : true | false 是否启用顺序按钮控制

isControlerHide : true | false 否隐藏顺序按钮

stayTime : 3000 播放间隔

transTime : 1500 转场时长

transDirection : 'right' | 'left' 转场方向

transFunction : 'adv-scaleRotate' | 'adv-scale' | 'adv-fragmentFly' | 'slide' | 'push' | 'transparency' 转场动画,支持普通和高级两种类别

transEasying : 'easeOutExpo' | .. 转场过渡

####资源参数imageSrc

存在第二个参数的时候  [   './image/IU.jpg',   './image/saber.jpg',   './image/umberalla.jpg',   './image/Wallpaper_1236.jpg'  ] 

没有该参数时,会默认将html中已有的img元素加载为资源

 <img src="./image/IU.jpg">   <img src="./image/saber.jpg">   <img src="./image/umberalla.jpg">   <img src="./image/Wallpaper_1236.jpg"> 

tips:

1.slide和push使用jquery.animate实现,追求的是位移转场的连续性,方向目前只设置了left和right,曲线支持animate原生和easing插件

2.高级转场adv-scaleRotate,adv-scale和transparency基于css实现,没有转场方向,曲线完整支持css属性transition

3.高级转场adv-fragmentFly基于个人碎片动画插件 fragmentFly.实现,取消前一张/下一站张的控制按钮,支持left/right/up/down四个方向,分割量可在插件内部自行修改,但是高密度分割下需要注意性能问题


You May Also Like