jQuery 3d轮播图(原创)

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

 15212  131  查看评论 (17)
jQuery 3d轮播图(原创) ie兼容10

更新时间:2018/4/20 下午4:10:31

更新说明:拖了好久 今天终于想起来了 然后补上了自动轮播 

var aa = new zturn({
    id: "zturn", //id
    opacity: 0.9, //透明度
    width: 382, //元素宽度
    Awidth: 1024, //轮播盒子全部宽度
    scale: 0.9, //元素缩放比例
    auto: true, //是否轮播 默认5000
    turning: 1000 //轮播时长
})

发布时间:2018-1-29 22:56

本插件呢,是因为要做一个轮播效果的东西。轮播的东西里面有图有文字,但是网上找了很多插件,都只是改变容器的宽度来实现3d效果。这样的话 只放图片还可以 但是里面的文字会出现超出或者其他的瑕疵  所以写了这个插件 用的是过度和css3变形来实现文字也缩放的效果 功能不全 只有上一个下一个 和点击那个那个变成最上方一个的效果

代码说明

var zturns = new zturn({
    id: "zturn", //容器的id
    opacity: 0.9, //透明度比例
    width: 382, //单个轮播元素大小
    Awidth: 1024, //整个轮播容器宽度
    scale: 0.9 //缩放比例
})
zturns.next_() //下一张
zturns.prev_() //上一张

这用这破插件还要自己定义这个 transition: all 0.5s; 自己想写在那里就写在那里吧 然后0.5这个当然就是时间了

大概就这点效果了 而且ie浏览器不兼容过度动画效果 

class的话 这个是必要的 其他的看样式可以随便改  大概就是这样了 兼容ie实在是不会了 原本想用jq的animate做 这样应该就可以兼容ie了 但是这玩意又没法写scale这种属性 (好吧其实能写 只是感觉太麻烦了) 

或者有没有大神能帮着看看我写的代码 求个能兼容ie的写法 新手小白 qiuwupen

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

jQuery百叶窗轮播插件Shutter

兼容至IE8的自适应百叶窗轮播,切换效果多样。
  幻灯片和轮播图
 10402  84

jq图文焦点广告轮播代码

jquery图文焦点广告轮播代码是一款jquery.nivo.slider.js图片插件制作图文焦点广告轮播代码。
  幻灯片和轮播图
 17843  177

3D轮播幻灯片

支持多种3D轮播切换特效
  幻灯片和轮播图
 17758  264

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 14470  83

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

    你我 0
    2018/6/25 17:08:18
    欧科网络(张宸) 0
    2018/5/9 9:00:55
    ie支持还没有解决吗 回复
    取个英文名不行吗 0
    2018/5/3 16:29:46
    怎么改成三个
        zwb0
        2018/5/4 9:41:28
        删去两个不就是三个了么
    回复
    ?? 小 白。 0
    2018/4/8 15:05:15
    可不可以写带自动轮播的
        zwb0
        2018/4/8 17:01:17
        这段时间一直很忙 所以一直没补上 你可以用使用定时器配合zturns.next_()或者是zturns.prev_() 就可以了
        ?? 小 白。0
        2018/4/8 17:02:54
        我研究了半天 ,没明白...
        zwb0
        2018/4/10 9:39:56

        就是用万能的定时器啊
        然后大概是

        var timer=setInterval(function(){
            zturns.next_()
        },5000)

        然后可以写鼠标移入移出时停止启动定时器就好了 那天回复完就关了 今天才看到

    回复
    bb8sq 0
    2018/3/29 20:38:46
    完美HLJMT 0
    2018/3/21 11:52:22
    上下轮播怎么搞呢
        zwb1
        2018/4/8 17:00:23
        使用定时器配合zturns.next_()或者是zturns.prev_() 就可以了
    回复
    拘深至攵ミ命 0
    2018/1/30 16:36:08

    可以自动轮播吗???

        zwb0
        2018/1/31 8:49:24

        自动轮播的话 你就用定时器配合zturns.next_() //下一张 我们公司没需要自动轮播所以就没写 等我有时间的话 再补上

    回复
    WckY 0
    2018/1/30 10:24:08

    试试用swiper.js里的coverflowEffect 属性吧 我用它实现过纯图片的3d效果 

        zwb0
        2018/1/30 11:01:11

        那个我试过 但是会完全不兼容ie9 使用swiper的话 样式也完全没了

        迷茫的青春需要些天真0
        2018/5/8 13:31:46
        都可以 就是在样式上的选择了
    回复
    zwb 0
    2018/1/30 9:01:53

    好像当时写说明的时候没打全 是 class的话 只有zturn-item这个是必要的 想要加 transition: all 0.5s; 的话 给它加上就可以了

    回复
取消回复