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

这是一款效果非常酷的jQuery和CSS3圆形图片切换特效。该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画。可以任意设置多张图片进行来回翻转、旋转切换，效果堪称一流。

使用方法

首先要引入jQuery和thereSomeThingAboutMe.js文件，以及插件依赖的animate.css文件。

<link href="css/animate.css" rel='stylesheet' type='text/css'/> 
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/thereSomeThingAboutMe.js"></script>               
              

HTML结构

该圆形图片切换特效的HTML结构是使用一个<div>来包裹一个<img>元素。图片的src首先指向第一张要显示的图片。图片默认的ID选择符是myPic，如果更改的话后面要在参数中重新配置。同时图片要添加class animated来应用animate.css的动画。

<div class="about-of-me">
    <img src="images/01.jpg" id="myPic" height="250" class="animated "/>
</div>          
              

初始化插件

在页面加载完毕之后，可以使用下面的方法来初始化该圆形图片切换特效插件。

thereSomeThingAboutMe.run();
              

也可以在初始化时自定义一些配置参数：

thereSomeThingAboutMe.run({
  random:false,
  time: 6500,
  pictures: ['1.png', '2.png', '3.png','vs.vs..'],
  inAnimation: 'zoomIn',
  outAnimation: 'bounceOut',
});                
              

配置参数