jQuery轮播滚动插件(原创)

                所属分类?#22909;教?UI-幻灯片和轮播图,滑块和旋转,滚动

                 11847  65  查看评论 (18)
                分享到微?#25490;?#21451;圈
                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

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


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

                使用方法

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

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

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

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

                也可以直接初始化

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

                ?#30475;?#30340;照片浏览工具

                view.js viewer是一款功能?#30475;?#30340;图片查看器jQuery插件
                  幻灯片和轮播图
                 17022  187

                jQuery轮播图插件slide.js

                基于jQuery拓展的轮播插件,使用方便简单,只用一句代码自动加载,方便?#25442;?/small>
                  幻灯片和轮播图
                 32559  144

                html5全?#38142;?#22270;幻灯片切换特效按钮特效

                html5全?#38142;?#22270;幻灯片切换特效按钮特效
                  幻灯片和轮播图
                 20557  136

                lightslider支持移动触摸的轻量级jQuery幻灯片插件

                lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马。
                  幻灯片和轮播图
                 14725  139

                讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币

                  青涩 0
                  2019/4/29 17:30:46
                  图片宽度100%,js在哪里?#27169;?回复
                  图存程序定制工作室 0
                  2019/4/18 2:38:52
                  鼠标连续点下一张按钮的时候,后面出来的每张图片间隔?#25302;?#22833;了. 希望老哥看看是什么B U G 手动微笑.感谢
                      西瓜0
                      2019/4/18 8:51:01
                      我认为这不算bug,如果用户着急查看下一?#29275;?#27599;一张还存在时间间隔反而会不好,等的会很累。
                      图存程序定制工作室0
                      2019/4/18 10:36:23
                      是图片和图片之间的间距不是时间间隔. 您连续点下一张每张图与每张图的间距就没了.也?#25442;?#24674;复.
                      180301273751
                      2019/4/29 9:18:06
                      是inline-block引起的元素白边,已经修改
                      180301273750
                      2019/4/29 9:19:30
                      容器元素的样?#25945;?#21152;一个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.这个建议挺好?#27169;?#25105;已经移出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结?#22815;?#32773;给父元素加点属性 轮播就不生效了。。。
                      180301273750
                      2019/4/13 23:33:47
                      只要没有修改插件html结构,就?#25442;?#26377;问题
                  回复
                  盘龙 0
                  2019/4/13 15:51:56
                  怎么下载
                      蒲公英失约的夏~0
                      2019/4/15 15:19:51
                      回答别人问题有Q币
                  回复
                  yin.x.f 0
                  2019/3/20 9:36:44
                  简单好用,就是切换时有点生硬,加入缓动效果就更好了。 回复
                  areyouOk 0
                  2019/3/19 21:39:16
                  简单好用,就是切换时有点生硬,加入缓动效果就更好了。
                      ??小黏包0
                      2019/3/28 17:08:51
                      和你一样
                      走失的瓶盖0
                      2019/4/13 11:01:01
                      是吗
                  回复
                取消回复
                  短信接口
                快3倍投资金计划