JS Code block 代码块–横向滚动翻页

星期一, 2023-04-17 | Author: Lee | computer, 前端 | 418 views

横向滚动翻页
横向滚动插件，是一个有横向翻页按钮，同时翻页时有滚动效果的插件。在公司官网展示不是很多东西情况下会经常用到。

demo
可以在本地下载这个项目： https://github.com/PhilipsYuan/horizontal-roll-pagination， 然后在 本地跑下demo.html 文件

使用说明
你需要引入horizontal-roll-pagination.js， 引入之后会在全局window下有个属性HorizontalRollPagination，你可以new 它创建实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let config = {
        // preDom: 前一页的按钮节点 -- 必须
        preDom: document.getElementsByClassName('prev')[0],
        // nextDom: 后一页的按钮节点 -- 必须
        nextDom: document.getElementsByClassName('next')[0],
        // box: 可视区域的节点 -- 必须
        box: document.getElementsByClassName('box')[0],
        // scrollDom: 会被移动的节点 -- 必须
        scrollDom: document.getElementsByClassName('scroll_list')[0],
        // parentDom: 展示项的父节点 -- 必须
        parentDom: document.getElementsByTagName('ul')[0],
        // 是否循环
        loop: true
    };
    let horizontalRollPagination = new HorizontalRollPagination(config);
    horizontalRollPagination.init();

这个插件对dom节点需要一定要求。它的结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="scroll" >
    <button class="prev" >前一页</button>
    <div class="box">
        <div class="scroll_list">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
            </ul>
        </div>
    </div>
    <button class="next">后一页</button>
</div>

说明：

前一页和后一页的按钮dom，可以放在任意位置。也可以不在这个结构里。
box节点： 必须是有具体width的。且overflow: hidden; position: relative;
scroll_list节点： 必须是position: absolute;
属性方法

参数 类型 是否必须 含义
preDom dom对象 Y 前一页的按钮节点
nextDom dom对象 Y 后一页的按钮节点
box dom对象 Y 可视区域的节点
scrollDom dom对象 Y 会被移动的节点
parentDom dom对象 Y 展示项的父节点
loop Booleans N 是否可以循环
speed number N 设置滚动的速度， 默认为5， 设置值的范围【1 – 10】
reset Function N 为实例下挂的方法（无参数）： 在展示项（li）发生改变时, 需要调用这个方法进行设置
refresh Function N 为实例下挂的方法（无参数）： 在可视区（box）发生改变时, 需要调用这个方法进行设置。一般发生在自适应布局时用到
赏

Tags:

文章作者: Lee

本文地址： https://www.pomelolee.com/2355.html

除非注明，Pomelo Lee文章均为原创，转载请以链接形式标明本文地址

No comments yet.

Leave a comment

Search

相关文章

热门文章

最新文章

文章分类

标签云

Links

Meta