UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery上下左右滚动插件rollSlide.js

所属分类：UI-滚动

 69848  561  查看评论 (62)
分享到微信朋友圈
X
jQuery上下左右滚动插件rollSlide.js ie兼容8
 查看演示  立即下载

间隔滚动

1
2
3
4
5
6
7
8
.rollSlide(obj)方法：
    参数 obj 为对象，
            orientation： string， 滚动方式 'left',
            'right','top','bottom' 4个方向，默认为 'left'
            num： number， 滚动数量  默认为 1
            v：numer， 滚动速度  默认为 0
            space：number， 间隔时间  默认时间为 5000ms， 最小间隔时间为 100ms
            isRoll： boolean，  是否自动播放   必填，没有默认值

不间断滚动 

1
2
3
4
5
6
.rollNoInterval()方法：
    无参数， 返回4个方法
        .left()  左方向滚动
        .right()  右方向滚动
        .top()  上方向滚动
        .bottom()  下方向滚动


相关插件-滚动
查看更多

双向垂直上下滚动

 垂直滚动插件，可切换向上或向下方向滚动。
  滚动
 48255  375

向下滚动加载动画特效插件AOS

 向下滚动网页加载动画特效插件AOS
  滚动
 37931  435

jquery模拟滚动条（未封装）

 jquery模拟滚动条，支持自定义滚动条样式，兼容pad，web手机端未测试；支持同一网页多个滚动条；支持添加和删除（本人对封装不太了解，未封装）
  滚动
 39358  340

类似fullPage的全屏滚动插件

 这是一款类似fullPage的全屏滚动插件，使用很简单
  滚动
 51711  418

讨论这个项目（62）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Strive ° 0
    2019/6/18 16:11:10
    下载下来感觉很好用
        年轻真好/qq0
        2019/6/19 17:46:35
        是的
    回复
    需要努力啊咩 0
    2019/3/28 15:35:03
    感觉还行
        泽九0
        2022/4/11 13:42:48
        是的
    回复
    天晓 0
    2019/3/24 10:27:53
    一统天下 0
    2019/3/18 10:19:41
    能单独对tbody进行轮播吗？Thead不轮播 回复
    一统天下 0
    2019/3/18 10:18:12
    感觉很不错的样子哦 回复
    Destiny 0
    2019/3/13 16:48:29
    可适用于手机端嘛 回复
    ? 0
    2019/1/17 11:18:32
    不间断滚动怎么给它加悬浮暂停 回复
    歌?S滕 0
    2019/1/11 14:11:48
    复制的第二帧没有点击事件啊，显示没有方法 回复
    物语 0
    2018/12/21 14:44:46
    可以用吗？好用吗 回复
    喂、、丫头！放下你的低调 0
    2018/6/20 13:43:27
    自动滚动很长时间后，会出现某一页连续重播， 怎么处理？
        xiaowiba0
        2018/6/23 10:25:12
        同问，感谢
        bbh0
        2018/7/11 10:03:01
        用的什么感觉
        物语0
        2018/12/21 14:45:17
        好用吗？
        悠悠的fish 0
        2019/5/13 10:45:32
        同问
        悠悠的fish 0
        2019/5/13 10:57:48
        v的值必须小于space；例如 v: 1000, space:2000, 这样是不会出现你说的情况！
        Strive °0
        2019/6/18 16:11:53
        同问
        四夕柒0
        2019/12/7 13:54:09
        同问
        柠檬不酸i0
        2020/4/29 14:57:42
        我不需要space怎么办
        柠檬不酸i评论奖励 1 jQ币
        2020/4/29 17:11:05
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        case 'left':
            $ul.append(cloneSliceItem);
            $ul.animate({
                'left': -range + 'px'
            }, v, function() {
                $(this).css({
                    'left': 0
                });
                $(sliceItem).remove();
                isStart = true; //开启滚动
            });
            break;

        自动滚动很长时间后，会出现某一页连续重播，是因为$(sliceItem).remove();写在了animate里面，animate还没执行完，下一个push的时候获取的就是还没有删完的li，所以在后面就会出现重复的问题，
        把$(sliceItem).remove();放在animate外面就解决了重复的问题，但是在滚动的左侧会出现闪一下再删除，动画效果不好

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复