轮播

jQuery插件 lrCalousel 使用说明

1. 初始化


    默认渲染
        引用插件js时 如果用户未声明$.noLrCarousel=true 默认会自动渲染.J_widget元素中data-init不等于1的元素
        (data-config中配置render:0时只渲染样式部分,不涉及js)

    单个渲染
        var Carousel=new $.widget($(".J_widget").eq(0));

    加参数的单个渲染
        var Carousel=new $.widget($(".J_widget"),{
            effect:"scrollx",
            autoplay:1
            .....
        });

    全组渲染
        var Carousel=$.render_all($(".J_widget"));

2. 参数配置

参数项

可选值

说明

备注

type

carousel/tab

插件类型

effect

none/fade/scrollx/scrolly

轮播类型

contentCls

.contentCls/*

轮播视图容器

navCls

.navCls/*

轮播导航容器

triggerType

click/mouseover

切换方式

prevBtnCls

.prev/*

上一屏

nextBtnCls

.next/*

下一屏

view

([width,height])

视图尺寸

drift

number(px)

移动时的单位长度

speend

500/number

轮播切换速度(ms)

hasTriggers

1/0

开启焦点切换

autoplay

1/0

自动播放

render

1/0

轮播是否渲染

reverse

0/1

自动倒序播放

index

0/number

当前焦点图索引

delay

5000/number

焦点图停留时间(ms)

callback

null/fn

轮播执行完毕的回调函数

keyid

指定当前轮播实例的key

timeBtnCls

.time-box/*

倒计时容器

timeUnitCls

({Object})

时间单位容器 y/m/d/h/i/s

endtime

(yyyy-mm-dd hh:ii:ss)

结束时间

支持-:/分隔符

key

轮播定时器id

只读

timeKey

倒计时定时器id

只读

cid

随机id识别码

只读

注意: 1.可选项第一项为默认值; 2.圆括号内的特殊类型值请按格式; 3.备注只读类型的参数无须设置;

4.本插件满足基本demo结构即可默认渲染可不依赖任何JS代码如要阻止默认渲染请在.J_widget元素上设置data-init="1" 或用JS声明$.noLrCarousel=true(适用于将渲染权限交给其它插件)

轮播示例1:

y轴滚动 (由于在轮播容器 .J_widget 上外加了 data-init=1 所以不会被渲染)

data-config='{"effect":"scrolly","speend":500,"autoplay":0}'


        HTML结构1
    <div class="J_widget" data-config=''>
        <ul class="contentCls">
            <li><img src="https://img.alicdn.com/tps/TB1fsp9LpXXXXXCXXXXXXXXXXXX-520-280.jpg"></li>
            <li><img src="https://aecpm.alicdn.com/simba/img/TB19okRLVXXXXXHXFXXSutbFXXX.jpg"></li>
            <li><img src="https://aecpm.alicdn.com/simba/img/TB1yDHkIVXXXXbaXpXXSutbFXXX.jpg"></li>
            <li><img src="https://img.alicdn.com/tps/TB10aBDLpXXXXX0XFXXXXXXXXXX-520-280.jpg"></li>
        </ul>
        <ul class="navCls">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
    </div>

轮播示例2:

显示隐藏倒计时

data-config='{"effect":"fade","view":[520,280],"delay":3000,"triggerType":"mouseover","endtime":"2016-9-30 17:05:02"}'

天时分秒

轮播示例3:

x轴轮播

data-config='{"effect":"scrollx","speend":500,"view":[520,280],"delay":3000,"triggerType":"mouseover","endtime":"2016-9-30 17:05:02"}'

天时分秒

轮播示例4:

默认轮播

data-config=''

轮播示例5:

x轴轮播多图轮播

data-config='{"effect":"scrollx","move":1,"view":[1040,280],"keyid":"test001","pageX":"auto","drift":520,"speend":500,"autoplay":1,"endIndex":-1,"delay":5000,"triggerType":"click"}'


        HTML结构2
    <div class="J_widget" data-config=''>
        <ul class="contentCls">
            <li>
                <dl>
                    <dd><img src="https://img.alicdn.com/tps/TB1fsp9LpXXXXXCXXXXXXXXXXXX-520-280.jpg"></dd>
                    <dd><img src="https://img.alicdn.com/tps/TB1fsp9LpXXXXXCXXXXXXXXXXXX-520-280.jpg"></dd>
                    <dd><img src="https://img.alicdn.com/tps/TB1fsp9LpXXXXXCXXXXXXXXXXXX-520-280.jpg"></dd>
                    <dd><img src="https://img.alicdn.com/tps/TB1fsp9LpXXXXXCXXXXXXXXXXXX-520-280.jpg"></dd>
                </dl>
            </li>
        </ul>
        <ul class="navCls">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
    </div>

轮播示例5:

y轴轮播多图轮播

data-config='{"effect":"scrolly","move":1,"view":[520,560],"height":280,"drift":280,"keyid":"test001","pageY":"auto","speend":500,"autoplay":0,"endIndex":-1,"delay":5000,"triggerType":"click"}'