jQuery响应式断点轮播(原创)

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

 42704  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'//下一个按钮
})

使用方法见注释

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

jQuery 3d轮播插件flipster.js

JQuery+css实现图片轮播效果,支持移动端拖动切换。
  幻灯片和轮播图
 64492  542

图片点击查看更多图片

仿京东,天猫商品详情 图片点击查看更多图片
  幻灯片和轮播图
 69205  313

3D图片轮播

带倒影效果的3D轮播图效果插件
  幻灯片和轮播图
 43526  458

仿英雄杀游戏官网幻灯片JS代码

仿英雄杀游戏官网幻灯片JS代码
  幻灯片和轮播图
 36537  431

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复