css木马式自动轮播,基于jQuery实现自动轮播旋转木马特效_jquery

元素。

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

CSS样式

你需要为该旋转木马特效添加下面的一些必要的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

}

初始化插件

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

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

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

网友评论

文明上网理性发言，请遵守 新闻评论服务协议我要评论

立即提交

专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习