jquery3d轮播插件
2017-08-15 本文已影响0人
最后只剩躯壳
jquery 旋转木马 banner切换 github源码下载地址
实现原理
利用 css3 来实现动画
当切换下一个元素（项目中的 li）时，所有元素使用它前一个元素的样式，第一个元素用最后一个元素的样式
反之 切换上一个盒子时，所有元素使用它后一个元素的样式，最后一个元素用第一个元素的样式
- 项目中有2d 和3d 轮播案例
- 样式文件是用less写的，请用支持less预编译的ide运行，或者自行编译成css
(如果你的电脑全局安装了 less 执行编译命令 lessc slide.less slide.css) - 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部分
<script src="../js/slide-min.js"></script>
<script>
$(function(){
//3d
$('#slide3d').slideCarsousel({slideType:'3d',indicatorEvent:'mouseover'});
//2d
var sliderDescArr=[],i=0,len=10;
for(;i<len;i++){
sliderDescArr.push(new Array(10).join(''+i));
}
$('#sliderDesc').text(sliderDescArr[0]);
$('#slide2d').slideCarsousel({callbackFunc:function(index){
$('#sliderDesc1').text(sliderDescArr[index]);
}});
});
</script>
html 容器设置类样式 slide-3d or slide-2d
html 部分
<div id="slide2d" class="slide-carousel slide-2d">
<ul class="item-list clearfix">
<li class="item0">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item1">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item2">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item3">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item4">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item5">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item6">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item7">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item8">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
<li class="item9">
<div class="item-content">
<a href="javascript:void(0);">
</a>
</div>
</li>
</ul>
<!--indicators-->
<div class="indicator-list">
<a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
<a href="javascript:void(0);" data-slide-index="1"></a>
<a href="javascript:void(0);" data-slide-index="2"></a>
<a href="javascript:void(0);" data-slide-index="3"></a>
<a href="javascript:void(0);" data-slide-index="4"></a>
<a href="javascript:void(0);" data-slide-index="5"></a>
<a href="javascript:void(0);" data-slide-index="6"></a>
<a href="javascript:void(0);" data-slide-index="7"></a>
<a href="javascript:void(0);" data-slide-index="8"></a>
<a href="javascript:void(0);" data-slide-index="9"></a>
</div>
<!--controls-->
<div class="controls">
<a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
<a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
</div>
<!--desc-->
<div class="desc">
<a href=""><strong id="sliderDesc1"></strong></a>
</div>
</div>
轮播公共样式（我这里用的是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);}
}
}
