200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html圆形图片切换 jQuery和CSS3炫酷圆形图片切换特效

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

时间:2018-11-11 19:50:08

相关推荐

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动画名称

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。