DoraCMS

您现在的位置是:首页>文档内容页

文档详情

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

doramart 2016-04-27 15:13:14 插件225556
基于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类型



文章评论

取消回复
登录 参与评论

评论列表(