基于Zepto的轮播效果，兼容IE10+
基于Zepto的轮播效果，兼容IE10+
#需要引入
<link rel="stylesheet" href="index.css"> <script src="zepto.min.js"></script> <script src="carousel.js"></script>
#html结构
<div class="carousel"> <div class="carousel-box"> <ul class="carousel-inner"> <li class="item"><img src="banner1.jpg"></li> <li class="item"><img src="banner2.jpg"></li> <li class="item"><img src="banner3.jpg"></li> </ul> <ol class="carousel-pagination"> <li data-slide-to="0" class="active"></li> <li data-slide-to="1"></li> <li data-slide-to="2"></li> </ol> <div class="carousel-control"> <div class="left"><</div> <div class="right">></div> </div> </div> </div>
#使用
$(".carousel").carousel()
#参数
| key | value | type | description |
|---|---|---|---|
| type | normal or opacity | "string" | normal普通的无缝轮播，opacity改变透明度的轮播，默认为normal |
| width | number or percent | "string" | 设置轮播的宽度，支持百分比，数值时不加px，默认为100% |
| speed | num | "number" | 设置轮播的速度，默认为600 |
| autoplay | num | "number" | 设置自动轮播的时间间隔，如果不需要自动轮播则设置为0，默认为3000 |
| pause | hover | "string" | 鼠标hover到轮播图上时，暂停轮播，如不需要则设置为空，默认为hover |
| arrow | hover | "string" | 鼠标hover到轮播图上时，显示左右箭头，一直显示时设置为空，默认为hover |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
