jquery3d轮播插件

jquery 旋转木马 banner切换 github源码下载地址

实现原理

利用 css3 来实现动画
当切换下一个元素（项目中的 li）时，所有元素使用它前一个元素的样式，第一个元素用最后一个元素的样式
反之 切换上一个盒子时，所有元素使用它后一个元素的样式，最后一个元素用第一个元素的样式

1. 项目中有2d 和3d 轮播案例
2. 样式文件是用less写的，请用支持less预编译的ide运行，或者自行编译成css
   (如果你的电脑全局安装了 less 执行编译命令 lessc slide.less slide.css)
3. slide.js 支持自定义参数 (请查看默认配置)

slide-3d.png

欢迎路过的同学提问及留言

默认配置

 $.fn.slideCarsousel.defaultSetting = {
        slideInterval :'slideInterval', // 定时器名称
        isAutoChange :true, // true or false 是否自动播放
        direction : 5000, //  间隔时间
        callbackFunc:null, // 如果不为空，会执行该回调函数
        indicatorEvent:'click', // 指示器事件，支持 click or mouseover 
        slideType:'2d' //  轮播类型 2d 或者 3d
     }

在项目中使用

js部分

html 容器设置类样式 slide-3d or slide-2d

html 部分

 

            

                

                    

                        
                            ![](../image/banner1.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner2.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner3.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner4.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner5.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner6.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner7.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner8.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner9.jpg)
                        
                    
                
                

                    

                        
                            ![](../image/banner10.jpg)
                        
                    
                
            
            
            

                
                
                
                
                
                
                
                
                
                
            
            
            

                
                
            
            
            

                
            
        

轮播公共样式（我这里用的是less）

.slide-carousel{width: 100%;height: 100%;position: relative;overflow: hidden;
  .item-list{position:relative;height: 100%;width:100%;overflow: hidden;
    li{
      .item-content{width:100%;height: 100%;
        a{display: block;width:100%;height: 100%;
          .cover-img{width:100%;height: 100%;}
        }
      }
    }
  }
  .indicator-list{position: absolute;bottom:20px;left:50%;margin-left: -63px;z-index: 100;
    a{display: inline-block;width: 12px;height: 12px;border: 2px solid #fff;border-radius:50%;overflow: hidden;background-color: #ccc;margin-left: 5px;
      &.selected{border-color: #ff6700;background-color: #5fff92;}
    }
  }
  .controls{opacity: 0;
    a{cursor: pointer;text-decoration: none;width:40px;height: 60px;position: absolute;background-color:rgba(0,0,0,0.2);color:#fff;font-size: 35px;padding-top: 25px;z-index: 2;
      &:hover{background-color:rgba(0,0,0,0.5);}
    }
    .item-prev{top:50%;left: 0;margin-top: -42px;}
    .item-next{top:50%;right: 0;margin-top: -42px;}
  }
  .desc{height: 72px;width:100%;position: absolute;bottom: 0;left: 0;background-color:rgba(0,0,0,0.6);z-index: 99;
    strong{color:#fff;font-size: 20px;line-height: 72px;margin-left: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  }
  &:hover .controls{opacity: 1;transition: opacity 0.5s ease;}
}

自定义样式

@itemX-2d:1200px;
@itemX-3d:225px;
.itemDefault-3d(@translateX:@itemX-3d,@scale:0.8){
  transform: translate3d(@translateX, 0, 0) scale(@scale);
}
.itemDefault-2d(@translateX:@itemX-2d){
  transform: translateX(@translateX);
}

header .banner{width:1200px;height: 300px;margin: 100px auto 0;
  .slide-carousel{margin-bottom: 20px;}
  .slide-3d{
    .desc{display: none;}
    .item-list li{width:750px;height: 300px;transition: all 0.5s ease-out;opacity: 0;position: absolute;top:0;left: 0;
      &.item0{.itemDefault-3d(@itemX-3d*-1);}
      &.item1{ transform: translate3d(0, 0, 0) scale(0.8);transform-origin: 0 50%;opacity: 1;z-index: 2;}
      &.item2{ transform: translate3d(@itemX-3d, 0, 0) scale(1);transform-origin: 0 50%;opacity: 1;z-index: 3;}
      &.item3{ transform: translate3d(@itemX-3d*2, 0, 0) scale(0.8);transform-origin: 100% 50%;opacity: 1;z-index: 2;}
      &.item4{.itemDefault-3d(@itemX-3d*3);}
      &.item5{.itemDefault-3d(@itemX-3d*4);}
      &.item6{.itemDefault-3d(@itemX-3d*5);}
      &.item7{.itemDefault-3d(@itemX-3d*6);}
      &.item8{.itemDefault-3d(@itemX-3d*7);}
      &.item9{.itemDefault-3d(@itemX-3d*8);}
    }
  }
  .slide-2d .item-list li{width:1200px;height: 300px;transition: all 0.5s ease-out;position: absolute;top:0;left: 0;
    &.item0{.itemDefault-2d(@itemX-2d*-1);}
    &.item1{.itemDefault-2d(@itemX-2d*0);}
    &.item2{ .itemDefault-2d(@itemX-2d);}
    &.item3{.itemDefault-2d(@itemX-2d*2);}
    &.item4{.itemDefault-2d(@itemX-2d*3);}
    &.item5{.itemDefault-2d(@itemX-2d*4);}
    &.item6{.itemDefault-2d(@itemX-2d*5);}
    &.item7{.itemDefault-2d(@itemX-2d*6);}
    &.item8{.itemDefault-2d(@itemX-2d*7);}
    &.item9{.itemDefault-2d(@itemX-2d*8);}
  }
}