jQuery轮播滚动插件(原创)

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

 25839  196  查看评论 (23)
分享到微信朋友圈
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图片轮播插件jquery.tiles.js

jquery.tiles图片切换插件,支持多达12种特效、22个自定义参数;支持随机顺序、循环、正反方向、导航、缩略图;幻灯片播放前、中、后自定义事件等,相信可以满足绝大多数需求。
  幻灯片和轮播图
 21843  249

jQuery制作手机网页图片滚动切换支持拖动功能焦点图特效

jQuery制作手机网页图片滚动切换支持拖动功能焦点图特效
  幻灯片和轮播图
 31816  215

强大的照片浏览工具

view.js viewer是一款功能强大的图片查看器jQuery插件
  幻灯片和轮播图
 25435  309

基于roundabout.js的3d倾斜轮播

jQuery.roundabout.js制作CSS3图片倾斜层叠切换效果代码
  幻灯片和轮播图
 30966  429

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

    0度° 0
    2019/10/16 18:24:04
    你好,在手机上点击左右切换,离开的时候就不能自动切换了,修改了好久,没改好,不知道大神可知道
        180301273750
        2019/10/16 20:14:04
        什么叫离开的时候不能自由切换
    回复
    旧日的梦梦 0
    2019/9/19 16:09:19
    简单好用,就是切换时有点生硬,加入缓动效果就更好了。
        初吻的承诺0
        2019/9/22 9:10:20
        自己可以加上跑马灯效果
    回复
    青涩 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就可以了
    回复
    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
        感谢
    回复
    yin.x.f 0
    2019/3/20 9:36:44
    简单好用,就是切换时有点生硬,加入缓动效果就更好了。 回复
取消回复