加班到现在,先把代码贴出来,有时间再写文档。
代码地址:http://lib.xuxiangbo.com/js/imslide.js
还有个压缩版:http://lib.xuxiangbo.com/js/imslide.min.js
待续...
-----------------
2018.11.17 更新
严格意义上来说算不上一个插件,只能说是个封装的函数。
不依赖CSS文件,样式由JS控制,因为是项目中临时写的,所以暂时只支持移动端(touch) ,先来整理一下DOM结构:
<div class="imslide">
<div class="imslide-wraper">
<div class="imslide-item">item</div>
<div class="imslide-item">item</div>
<div class="imslide-item">item</div>
</div>
<div class="imslide-pointer"></div>
</div>
DMO:
imslide: 最外层的容器
imslide-wraper:轮播的区域
imslide-pointer:焦点
imslide-item: 轮播内容
参数:
loop:布尔值,是否支持循环播放
runAuto:布尔值,是否自动播放
runTime:数字,自动播放的时间间隔,默认3000毫秒 (设置该参数时,自动触发runAuto = true,可省略runAuto参数)
heigh:数字,轮播内容高度设置,默认200
point:对象,包含三个属性:
size:数字,焦点的大小,默认为10(即焦点为宽高10px)
color:字符串,焦点默认颜色,默认为 rgba(0,0,0,0.3)
focus:字符串,焦点选中颜色,rgba(255,255,255,0.7)
调用示例:
imslide({
loop: true,
runAuto: true,
runTime: 5000,
height: 200,
point: {
size: 12,
color: '#000',
focus: '#FFF'
}
})
本文标签: 轮播