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

jQuery轮播滚动插件（原创）

所属分类：媒体,UI-幻灯片和轮播图,滑块和旋转,滚动

 42534  326  查看评论 (27)
分享到微信朋友圈
X
jQuery轮播滚动插件（原创） ie兼容8
 查看演示  立即下载

更新时间：2019/4/29 上午9:17:52

更新说明：修改bug，图片周边有白边

更新时间：2019/4/11 下午5:39:06

更新说明：调用方法更新

本插件只需要调节两个参数

1. speed  可选 滚动时间间隔 默认值3000（即3s）

2. direction 可选  滚动方向 ‘vertical’向上滚动，‘horizantal’向左滚动，默认值'horizantal'

$('.singleScroll').mySingleScroll({speed: 3000,direction：'horizantal'});
//也可以直接初始化
$('.singleScroll').mySingleScroll();

更新时间：2019/4/3 下午3:11:21

更新说明：有几个朋友留言说切换时有点生硬，希望切换时有缓动效果，特意修改了一下，很感谢大家给的宝贵意见

发布时间：2019-03-19 21:36:10

使用方法

本插件只需要调节两个参数

1. speed  可选 滚动时间间隔 默认值3000（即3s）

2. 2. direction 可选  滚动方向 ‘vertical’向上滚动，‘horizantal’向左滚动，默认值'horizantal'

$('.singleScroll').singleScroll({
    speed: 3000,
    direction： 'horizantal'
});

也可以直接初始化

$('.singleScroll').singleScroll();
相关插件-幻灯片和轮播图,滑块和旋转,滚动
查看更多

jQuery轮播图切换插件slick.js

 slick.js实现图片轮播图渐隐切换动画特效，支持移动端滑动切换
  幻灯片和轮播图
 58286  362

兼容ie的平面百叶窗轮播

 兼容ie的平面百叶窗轮播，webkit内核支持最好。
  幻灯片和轮播图
 53427  484

SuperSlidev2.1焦点图幻灯片tab

 SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！
  幻灯片和轮播图
 45996  426

仿FLASH轮播图

 纯js的运动加定时器做的，掌握后可以自己做出任何运动效果。
  幻灯片和轮播图
 24599  321

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

    Leader Wolf 0
    2021/5/10 15:36:32
    请问每张图片切换下面的○点有吗？ 回复
    0度° 0
    2019/10/16 18:24:04
    你好，在手机上点击左右切换，离开的时候就不能自动切换了，修改了好久，没改好，不知道大神可知道
        180301273750
        2019/10/16 20:14:04
        什么叫离开的时候不能自由切换
        狼 ＆ 城中狼0
        2023/2/7 13:46:05
        非常感谢
    回复
    旧日的梦梦 0
    2019/9/19 16:09:19
    简单好用，就是切换时有点生硬，加入缓动效果就更好了。
        初吻的承诺0
        2019/9/22 9:10:20
        自己可以加上跑马灯效果
        Jason0
        2022/11/26 22:03:48
        大佬怎么改啊 彩鸟一个
    回复
    青涩 0
    2019/4/29 17:30:46
    图片宽度100%，js在哪里改？ 回复
    图存程序定制工作室 0
    2019/4/18 2:38:52
    鼠标连续点下一张按钮的时候,后面出来的每张图片间隔就消失了. 希望老哥看看是什么B U G 手动微笑.感谢
        西瓜0
        2019/4/18 8:51:01
        我认为这不算bug，如果用户着急查看下一张，每一张还存在时间间隔反而会不好，等的会很累。
        图存程序定制工作室0
        2019/4/18 10:36:23
        是图片和图片之间的间距不是时间间隔. 您连续点下一张每张图与每张图的间距就没了.也不会恢复.
        180301273751
        2019/4/29 9:18:06
        是inline-block引起的元素白边，已经修改
        180301273750
        2019/4/29 9:19:30
        容器元素的样式添加一个font-size:0就可以了
        狼 ＆ 城中狼0
        2023/2/7 13:46:29
        学习了！谢谢
    回复
    1448711794 1
    2019/4/16 11:34:57

    希望能改进的地方：

    1.你上一页下一页需要重置定时器。

    2.你这个option放init里面，还要opts["speed"] 这样使用，建议内部全局写法。

    3.init只是一个单独的启动方法，别所有的方法都写里面，没有条理。

    4.return返回api的地方，怎么扩展，if|else进行到底？

    5.命名太随便了。

    举个例子：

    next.click(function() {
    clearInterval(timers[i]);
    rmove(_this, sh);
    timers[i] = setInterval(function() {
        move(_this, sh);
    }, speed);
});

    定时器重置，实在不想重构你的代码了，精力有限。

        180301273750
        2019/4/16 13:22:42
        1.上一页下一页重置定时器干嘛，hover进去的时候已经clearInterval？
        3.这个建议挺好的，我已经移出init
        4.if/else需要判断横向滚动和竖向滚动
    回复
    1448711794 0
    2019/4/16 10:59:50
    好用，多张轮播很不错，至于样式自己写很简单，真棒 回复
    鼠?与你 0
    2019/4/15 15:52:28
    可以加一点延迟就更完美了 回复
    qzuser 0
    2019/4/13 22:31:22
    随便改一下html结构或者给父元素加点属性 轮播就不生效了。。。
        180301273750
        2019/4/13 23:33:47
        只要没有修改插件html结构，就不会有问题
    回复
    盘龙 0
    2019/4/13 15:51:56
    怎么下载
        蒲公英失约的夏～0
        2019/4/15 15:19:51
        回答别人问题有Q币
        舜网美编0
        2019/11/7 15:17:35
        感谢
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复