Html5添加非常实用的可自动轮播的旋转木马插件教程

时间：2016-01-11 17:33:49 阅读：253 评论：0 收藏：0 [点我收藏+]

标签：

一、使用方法
<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>

二、Html结构
<div class="caroursel rotator-demo">
<ul class="rotator-list">
<li class="rotator-item"><img src="image/1.jpg"></li>
<li class="rotator-item"><img src="image/2.jpg"></li>
<li class="rotator-item"><img src="image/3.jpg"></li>
</ul>
<div class="rotator-btn rotator-prev-btn"></div>
<div class="rotator-btn rotator-next-btn"></div>
</div>

三、CSS样式
.rotator-main {
position: relative;
width: 900px;
height: 400px
}

.rotator-main a, .rotator-main img{ 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-repeat center center;
background-color: red
}

.rotator-main .rotator-next-btn {
right: 0px;
background: url("../image/btn_r.png") no-repeat center center;
background-color: red
}

四、初始化插件
Caroursel.init($(’.caroursel’))

五、配置参数
<div class="caroursel rotator-main"
data-setting = ’{
"width":1000,
"height":270,
"posterWidth":640,
"posterHeight":270,
"scale":0.8,
"algin":"middle",
"speed":"1000",
"isAutoplay":"true",
"dealy":"1000"
}’>

KeyMob:专业移动广告联盟:KeyMob是一家创办于2014年的移动广告联盟,主打Android、IOS应用交叉推广和营销广告高效的优化管理,品牌多为广告主或应用开发者,保证站长收益最大化。

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）