html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效

这是一款效果非常酷的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动画名称