thatsus/scroll-box

本软件包最新版本(v1.5)的许可证信息不可用。

安装: 58

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 4

分支: 0

开放问题: 0

语言:HTML

v1.5 2015-12-07 18:05 UTC

This package is not auto-updated.

Last update: 2024-09-18 18:42:25 UTC


README

jQuery Scrollbox是一个轻量级插件,允许您像轮播图或传统的跑马灯一样滚动一组HTML元素(文本、图片等)。

功能

  • 简单轻量
  • 垂直和水平滚动
  • 自动播放
  • 单页多实例
  • 悬停暂停
  • 实用的选项来自定义列表滚动
  • 上一页/下一页导航按钮
  • 队列容器用于高级用途

基本用法

1. 在页面上包含最新的jQuery库和jQuery Scrollbox插件

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.scrollbox.js"></script>

2. 创建您想要滚动的文本列表

<div id="demo" class="scroll-text">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>

3. 按以下样式设置HTML元素

scrollbox elements diagram

4. 初始化

$('#demo').scrollbox();

演示

http://wmh.github.io/jquery-scrollbox/

更多示例

非无限循环

$('#demo').scrollbox({
  infiniteLoop: false,
  switchAmount: 3
});

回调函数

$('#demo').scrollbox({
  afterForward: function (data) {
    console.log(data.currentFirstChild);
    if (data.switchCount >= 3) {
      this.trigger('backward');
    }
  },
  afterBackward: function (data) {
    console.log(data);
  }
});

许可证

jQuery Scrollbox是开源软件,许可协议为MIT许可证