做网站|网站建设，就上易助科技网

html css js 插件使用指南

您现在的位置:

首页

技术文档

技术文档详情

JQuery可触屏极简滑块插件lory.js

来源：易助科技网浏览量：1收藏

简介

lory.js是一款JQuery可触屏极简滑块插件。插件特定：

1）硬件加速转换；

2）可用作jQuery插件；

3）支持自定义动画功能；

4）无限循环。

（下载的附件中附有DEMO）

API：

prev	slides to the previous slide
next	slides to the next slide
slideTo	slides to the index given as an argument: (arguments: index {number})
returnIndex	returns the index of the current slide element
setup	Binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
reset	sets the slider back to the starting position and resets the current index (called on Resize event)
destroy	destroys the lory instance by removing all lory specific event listeners

使用

1. 引入文件

<script src="js/lory.min.js"></script>
<script src="js/jquery.min.js"></script>

2. HTML

<div class="slider js_slider">
    <div class="frame js_frame">
        <ul class="slides js_slides">
            <li class="js_slide">1</li>
            <li class="js_slide">2</li>
            <li class="js_slide">3</li>
            <li class="js_slide">4</li>
            <li class="js_slide">5</li>
            <li class="js_slide">6</li>
        </ul>
    </div>
</div>

[CSS]
.slider {
}

.frame {
    /**
     * (optional) wrapper width, specifies width of the slider frame.
     */
    width: 880px;

    position: relative;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}

.slides {
    display: inline-block;
}

li {
    position: relative;
    display: inline-block;

    /**
     * (optional) if the content inside the slide element has a defined size.
     */
    width: 880px;
}

3. 用法示例

将其作为ES2015模块使用：

import { lory } from 'lory.js';
document.addEventListener('DOMContentLoaded', () => {
    const slider = document.querySelector('.js_slider');

    lory(slider, {
        // options going here
    });
});

将其作为commonJS模块使用：

var lory = require('lory.js').lory;

document.addEventListener('DOMContentLoaded', function() {
    var slider = document.querySelector('.js_slider');

    lory(slider, {
        // options going here
    });
});

以JQuery方式使用：

<script>
    'use strict';

    $(function() {
        $('.js_slider').lory({
            infinite: 1
        });
    });
</script>

做网站|网站建设，就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！

简介

使用

1. 引入文件

2. HTML

3. 用法示例

相关链接