1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html 旋转木马 轮播 jQuery 3D旋转木马轮播图插件jquery.caroursel.js

html 旋转木马 轮播 jQuery 3D旋转木马轮播图插件jquery.caroursel.js

时间:2018-09-07 03:43:57

相关推荐

html 旋转木马 轮播 jQuery 3D旋转木马轮播图插件jquery.caroursel.js

插件描述:jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果。

使用方法

该jQuery旋转木马插件需要引入jQuery,jquery.carousel.js文件。

HTML结构

该jQuery旋转木马插件使用一个

来作为包裹元素,在它里面是一个无序列表,用于放置图片,以及两个作为前后导航按钮的元素。

图片的数量需要为奇数张,否则显示会有一些异常,这是该插件的一个小bug。

CSS样式

你需要为该旋转木马特效添加下面的一些必要的CSS样式。.rotator-main{

position:relative;

width:900px;

height:400px

}

.rotator-maina,.rotator-mainimg{display:block;}

.rotator-main.rotator-list{

width:900px;

height:400px

}

.rotator-main.rotator-list.rotator-item{

position:absolute;

left:0px;

top:0px

}

.rotator-main.rotator-btn{

position:absolute;

height:100%;

width:100px;

top:0px;

z-index:10;

opacity:0;

}

.rotator-main.rotator-prev-btn{

left:0px;

background:url("../image/btn_l.png")no-repeatcentercenter;

background-color:red

}

.rotator-main.rotator-next-btn{

right:0px;

background:url("../image/btn_r.png")no-repeatcentercenter;

background-color:red

}

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。

Caroursel.init($('.caroursel'))

如果你需要自定义一些参数,可以在顶层

元素中设置data-setting属性。

data-setting='{

"width":1000,//旋转木马的宽度

"height":270,//旋转木马的高度

"posterWidth":640,//当前显示的图片的宽度

"posterHeight":270,//当前显示的图片的高度

"scale":0.8,//缩放值

"algin":"middle",//对齐方式

"speed":"1000",//动画速度

"isAutoplay":"true",//自动播放

"dealy":"1000"//延迟时间

}'>

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