[科技]支持移动触摸设备的简洁js幻灯片插件

2015-05-30 11:15:57   

  lory是一款支持移动触摸设备的简洁的js幻灯片插件。该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jQuery插件来使用。该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easing效果。以下列出该幻灯片的一些特点:

  支持移动触摸设备。

  简单,界面整洁,纯js调用。

  可以作为jQuery插件来使用。

  过渡效果支持硬件加速。

  可定制easing效果。

  可无限循环,制作为旋转木马。

  丰富的回调函数。

  HTML结构

  该幻灯片使用的HTML结构是固定格式的,参考下面的HTML结构格式:

<div class="slider js_simple simple">
    <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样式:

.frame {
    position: relative;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}
 
.slides {
    display: inline-block;
}
 
li {
    position: relative;
    display: inline-block;
}

  JAVASCRIPT

  完成上面的步骤之后就可以通过下面的方法来调用该幻灯片插件。

<script src="js/lory.min.js"></script>
<script>
    'use strict';
 
    document.addEventListener('DOMContentLoaded', function() {
        var simple = document.querySelector('.js_simple');
 
        lory(simple, {
            // options going here
        });
    });
</script>

做管理软件营销,找云南品智科技,快速搭建,抢占市场红利!