移动端组件——轮播图(slider)

  slider

查看demo    下载

抽时间重写了针对移动端的轮播图组件,功能非常简单,无间断轮播,可以触摸滑动。


   需要引用的文件: 

<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类型