jQuery超酷旋转轮播

所属分类:媒体-幻灯片和轮播图

 42197  397  查看评论 (14)
分享到微信朋友圈
X
jQuery超酷旋转轮播 ie兼容10

原理

  • 先设想一个立方体,但是观看本轮播,发现不需要左右两个面,所以去掉左右两个面,留下前后上下4个面。用4个div表示。因为整体不涉及到左右两个面,所以没有左右面。

  • 每一张图片都可以切割成x个立方体,每一个立方体用一个li表示,然后这x个li的4个div的背景图片动态设置。

  • 同一个li里面所有div背景图片相同,通过background-position和js动态设置偏移量。可以控制整个图片的背景不乱。

  • var x=300;//此值代表旋转分成的块数,可以更改,越大效果越明显,分成的越多。建议不超过999.过大会出现卡顿现象。    

大于一定图片可能不清晰。


相关插件-幻灯片和轮播图

jquery原创图片切换插件drawerSwitch

jquery原创图片切换插件drawerSwitch
  幻灯片和轮播图
 25381  320

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 43714  392

基于anime.js全屏图片视差旋转切换

基于anime.js制作全屏响应式的图片轮播展示效果
  幻灯片和轮播图
 28471  446

jq全兼容自适应宽度图片轮播(新手适用)

简单的jq逻辑,方便引用,易看懂,兼容性好
  幻灯片和轮播图
 24026  213

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

    纯纯 0
    2018/4/3 15:24:02
    怎么我不能引入css,非要写在内部样式 回复
    123 0
    2017/11/21 23:23:46

    交互有点问题,当鼠标放在上面的时候轮播图还回自动轮播,如果鼠标移入之后轮播图停止自动轮播的话,效果会更好

    回复
    梵高先生 0
    2017/9/14 17:10:49

    看的我好想吃啊,果冻

    回复
    ヅ羽ぷ寒灬 0
    2017/5/8 15:35:34

    为什么页面初始化的时候,轮播图要等零点几秒才会出现呢?

    回复
    ?? 0
    2017/2/22 9:55:39

    代码呢?想先看一下

    回复
    深白??月 0
    2017/1/31 10:47:56
    蜗牛大人 0
    2016/12/28 10:12:00
    有bug,作者还是仔细查一下计时器吧 回复
    丫头 0
    2016/11/15 9:11:08
    新心星醒 0
    2016/10/10 15:10:23
    Sear 0
    2016/10/3 9:10:44
    效果挺好,有自动翻转的? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复