这是一款效果非常酷的jQueryCSS3圆形图片切换特效。该圆形图片特效可以使用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',
});                
              

配置参数

参数 默认值 描述
object '#myPic' 图片元素的ID选择符
pictures ['1.png', '2.png', '3.png'] 图片数组,可以任意修改图片数量和名称
random true 是否随机显示图片
startNumber 0 开始图片的下标
time 5000(毫秒) 两张图片切换中间的延迟时间
inAnimation 'flipInX' 进入动画,可以是任何可用的animate.css动画名称
outAnimation 'flipOutY' 离开动画,可以是任何可用的animate.css动画名称