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

jQuery响应式断点轮播（原创）

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

 43908  449  查看评论 (33)
分享到微信朋友圈
X
jQuery响应式断点轮播（原创） ie兼容9
 查看演示  立即下载

更新时间：2018/5/3 下午4:14:22

更新说明：优化了点击事件

更新时间：2018/4/3 下午4:16:29

更新说明：增加了轮播区域随鼠标或手指移动的功能

$('#rvc1').rvc({
    liNum: 4,//2~5之间的整数
    spaceBetween: 30,//li项之间的距离
    plr: 20,//当屏幕小于1024时，rvc的padding-left，padding-right值
    time: 400,//动画时间
    prv: '.rvc-prv',//前一个按钮
    next: '.rvc-next'//下一个按钮
})

使用方法见注释

相关插件-幻灯片和轮播图,滑块和旋转
查看更多

vue.js轮播图(原创)

 vue的轮播小插件，vue初学者可以借鉴，代码量很少。
  幻灯片和轮播图
 53671  416

响应式banner，带手指换的特效，自定义设置属性

 响应式banner，支持移动端手指滑动切换，自定义设置属性
  幻灯片和轮播图
 54076  515

原生js轮播图插件Image Slider

原生js轮播图插件Image Slider 提供8种轮播特效，轻量级只有16k.
  幻灯片和轮播图
 43842  363

带进度条的鼠标点击放大特效插件

 通过拖动横向滚动条来放大或缩小组图
  幻灯片和轮播图
 29250  339

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

    q0001 1
    2020/6/18 14:56:24
    在rvc.js中，有个小bug 在第47行的system.x11和p == "X11" 改成xll，否则在移动端中，图片不会自动轮播 回复
    堇年小暖 0
    2020/3/25 9:19:46
    楼主，能不能发一份？感谢感谢，1401251593@qq.com 回复
    gcs 0
    2019/12/12 11:10:02
    加了那个自动滚动，非得点一下才可以滚，有人遇到过吗

    回复
    淡淡地忧殇丶 0
    2019/1/7 22:03:09
    635959097@qq.com 没有币了，可以发我邮箱一份吗，谢谢你.. 回复
    Vor drei Jahren Mr.G 0
    2018/11/29 18:40:26
    这个适应于移动端吗？
        ??????0
        2018/12/26 11:39:21
        可以的
    回复
    《孤星＊寒月》 0
    2018/4/8 17:25:24
    点击快了 后面有空白
        《孤星＊寒月》0
        2018/4/8 17:26:34
        点击快了 后面有空白 要是图片只有四个的话
        漫步0
        2018/6/11 17:22:56
        请问这个是直接JQ实现的吗，用到其他的框架了吗
        西瓜0
        2018/7/23 15:41:21
        没用别的框架，只用了jquery
        ??????0
        2018/12/26 11:43:25
        可以发我一份吗，没有币，1060527417@qq.com
    回复
    曹懦懦?? 0
    2018/3/27 17:00:54
    没有币 可以厚着脸皮伸手要一份吗。。442511683@qq.com 回复
    、小太阳 1
    2018/3/19 15:45:05
    解决了，可以自动轮播。
    setInterval(move_left, 5000)

    妥妥的~~
        今夜酷寒，不宜裸0
        2018/7/23 15:31:08
        setInterval(move_left, 5000)放在代码哪里？
        西瓜0
        2018/7/23 16:08:20
        rvc.js下return this.each(function(){函数中，或直接184行setInterval(move_left, 5000);
        记的加分号。
        今夜酷寒，不宜裸0
        2018/7/24 10:04:34
        加了没有反应呀，加了就应该可以自己轮播 的了吧
        今夜酷寒，不宜裸0
        2018/7/24 10:15:15
        可以了谢谢，我想在这个的基础上加上遮罩效果和鼠标悬浮图片宽高放大显示不知道好不好改
        西瓜0
        2018/7/24 10:31:35

        好加，加Css样式

        .img-wrapper img{transition:all 1s ease 0s;}
.img-wrapper img:hover{transform: scale(1.5);}

        就可以了。

        今夜酷寒，不宜裸0
        2018/7/24 11:01:37
        你把这些结合起来的话你这个demo会更加强大更多人喜欢用
        今夜酷寒，不宜裸0
        2018/7/24 11:08:39

        http://*****/
        其实我是想实现这个官网的竖屏的倒数第二个效果，但是没有全部合在一起效果的插件，我只能在插件上再加功能但是不是自己写的代码并不好加多其他的功能

        西瓜0
        2018/7/24 11:19:21
        你要的这些效果都可以通过修改css实现，不难。
        今夜酷寒，不宜裸0
        2018/7/24 11:40:33
        嗯，我在试着改，多多指教
        今夜酷寒，不宜裸0
        2018/7/24 16:29:50
        <li><img src="images/1532402772(1).jpg"></li>
        <div class="zhe1"></div>
        怎么我直接在li标签后面加个遮罩层显示不出来的？
        ??????0
        2018/12/26 11:42:03
        可以发我一份吗，没有币，1060527417@qq.com
        ricefoto0
        2019/5/17 11:17:34
        一开始等待时间有点久啊，自动播放
    回复
    、小太阳 0
    2018/3/19 11:15:26
    可以自动滚动吗 回复
    aslley 0
    2018/3/15 18:16:48
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复