这是一款效果非常酷的jQuery和CSS3圆形图片切换特效。该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画。可以任意设置多张图片进行来回翻转、旋转切换,效果堪称一流。
使用方法
首先要引入jQuery和thereSomeThingAboutMe.js文件,以及插件依赖的animate.css文件。
HTML结构
该圆形图片切换特效的HTML结构是使用一个
来包裹一个元素。图片的src首先指向第一张要显示的图片。图片默认的ID选择符是myPic,如果更改的话后面要在参数中重新配置。同时图片要添加class animated来应用animate.css的动画。
初始化插件
在页面加载完毕之后,可以使用下面的方法来初始化该圆形图片切换特效插件。
thereSomeThingAboutMe.run();
也可以在初始化时自定义一些配置参数:
thereSomeThingAboutMe.run({
random:false,
time: 6500,
pictures: ['1.png', '2.png', '3.png','vs.vs..'],
inAnimation: 'zoomIn',
outAnimation: 'bounceOut',
});
配置参数
参数
默认值
描述
object
'#myPic'
图片元素的ID选择符
pictures
['1.png', '2.png', '3.png']
图片数组,可以任意修改图片数量和名称
random
true
是否随机显示图片
startNumber
0
开始图片的下标
time
5000(毫秒)
两张图片切换中间的延迟时间
inAnimation
'flipInX'
进入动画,可以是任何可用的animate.css动画名称
outAnimation
'flipOutY'
离开动画,可以是任何可用的animate.css动画名称