这是一款JQ旋转木马JQ轮播图插件
这是一款JQ旋转木马JQ轮播图插件
JavaScript 图片展示处理
访问GitHub主页
共1Star
详细介绍
这是一款旋转木马轮播图,利用JQ制作的插件,学习作品,仅供学习交流!
API文档
HTML结构
<div id="carousel" data-carousel>
<div class="carousel-list">
<div class="item"><a href="#"><img src="src/img/1.jpg" alt="picture1" width="100%"></a></div>
<div class="item"><a href="#"><img src="src/img/2.jpg" alt="picture2" width="100%"></a></div>
<div class="item"><a href="#"><img src="src/img/3.jpg" alt="picture3" width="100%"></a></div>
<div class="item"><a href="#"><img src="src/img/4.jpg" alt="picture4" width="100%"></a></div>
<div class="item"><a href="#"><img src="src/img/5.jpg" alt="picture5" width="100%"></a></div>
</div>
<div class="carousel-arrow">
<div class="arrow arrow-prev"><a href="javascript:;" class="arrow-btn prev-btn"><</a></div>
<div class="arrow arrow-next"><a href="javascript:;" class="arrow-btn next-btn">></a></div>
</div>
</div>
- 每个轮播图最外层都需要设置 data-carousel属性标识,需要设置这个外层容器的样式
- 需要引入carousel.css样式文件
- 需要引入carousel.js脚本文件
- 并且依赖jQuery文件
调用插件接口
window.onload = function () {
$('#carousel').Carousel({
width: 1200,
height: 400,
imgWidth: 800,
imgHeight: 400,
scale: .6,
speed: 300,
verticalAlign: "top",
autoPlayDelay: 4000,
autoPlay: true
});
};
Options 参数
Options List:
- width:渲染容器的宽度
- height:渲染容器的高度
- imgWidth:图片区域的宽度
- imgHeight:图片区域的高度
- scale: 0.8:每张图与下一张图的缩放比例(0-1)的浮点值,1表示不变
- speed: 500:切换速度(ms)
- verticalAlign:居中方式[top,middle,bottom]
- autoPlay: false:是否自动播放[true,false]
- autoPlayDelay:自动播放延迟(ms)
推荐源码
暂无源码 更多源码...