移动端组件——轮播图(slider)
基于Jquery轮播图组件,无间断轮播,主要针对移动端。可以触摸滑动。
抽时间重写了针对移动端的轮播图组件,功能非常简单,无间断轮播,可以触摸滑动。
需要引用的文件:
<script src="js/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="css/dora.css"/> <script src="js/dora.js"></script>
注意:
1、jquery是基础文件
2、dora.css 是组件相关样式
3、dora.js 是组件所涉及到的js
使用方法:
html结构:
<div class="slider" id="demo"> <ul> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> </ul> </div>
js初始化:
$(function(){ new doraSlider('#demo',{ showFocus : true }); })
参数配置:
参数 | 说明 | 必须 |
showFocus | 是否显示焦点 | 否 |
width | 定义slider容器宽度,int类型 | 否 |
height | 定义slider容器高度,int类型 | 否 |
during | 每张幻灯片之间停顿时间,int类型 | 否 |
speed | 单个幻灯片滑动速度,int类型 | 否 |
很赞哦! ( 0
)
相关文章
- 利用 html2canvas 生成文章缩略图
- 纪录片《穹顶之下》全集103分钟1080P高清完整视频
- DoraCMS v2.1.5 版本更新
- DoraCMS v2.1.2 Docker 版本(生产环境)
- Nodejs 内容管理系统 DoraCMS 2.1.4 发布
- DoraCMS 插件化探索(一)
- DoraCMS 2.1.4 关于 '指定用户' 功能的优化说明
- DoraCMS 2.1.4 (发布版非源码) 抢先体验
- angularjs filter 详解
- angularJs的html转义过滤器
- ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签
- angularjs分页教程