js原生模拟swiper左右切换和滑动切换效果。
如上GIF所示，这次模拟的是切换3D特效，因为在之前开发过程中，产品有不同的需求，swiper有些功能不是很适用，所以就按照需求自己写了这种功能的效果。
具体原理是运用css里面的:
transform:totateY、translateZ、scale
所以希望大家对这几个css样式有一定的了解和认识。
具体是根据切换的索引值，动态的为每一个DOM元素添加不同的位置和比列，这样就可以很简单的实现上图效果，具体代码如下,为了方便我们统一用vue框架进行处理，当然有需要也可以拆除来当原生去使用。
如上图是此功能的DOM结构树，这里运用v-for进行了5个主题的循环。下面是两个左右按钮的点击切换。
其中list是我们规定好的位置，key值分别对应其css样式,我们这里用到了数组的分割，嘿嘿~需要大家好好想一想为什么要这样。只要理解了我圈住的那一个地方的代码，那这个功能就算是真的理解透了，在最后我们用forEach给每一个dom元素重新赋值就大功告成了.
说了这么多废话我估计你们是直接想ctrlC ctrlV吧，哈哈哈，话不多上上代码。
<style> //-------这里是页面的CSS样式
*{
padding:0;
margin: 0;
font-size: 0;
}
.app{
width: 500px;
height: 500px;
margin: 0 auto;
margin-top: 200px;
overflow: hidden;
}
.cente {
height: 130px;
width: 140px;
transform-style: preserve-3d;
transition: all 0.8s;
box-sizing: border-box;
position: relative;
margin: 0 auto;
margin-top: 200px;
}
.onu {
width: 120px;
height: 130px;
box-shadow: 0px 4px 13px 0px rgba(97, 38, 5, 0.2);
position: absolute;
background: url('../img/1.jpg') no-repeat;
background-position: center;
background-size: 100%;
transition-property: transform;
transition-duration: 0.6s;
}
.img_li {
width: 100%;
height: 85%;
position: relative;
}
.img_li img {
width: 70%;
position: absolute;
top: 11px;
left: 21px;
}
.tisz {
position: absolute;
min-width: 33px;
height: 16px;
line-height: 17px;
/*background-image: url('../img/1.png');*/
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
right: 1px;
top: 8px;
font-size: 14px;
font-weight: bold;
color: #240e1b;
text-align: center;
}
.sp_li {
font-size: 16px;
font-weight: 400;
color: #240e1b;
display: inline-block;
width: 100%;
height: 20%;
line-height: 20%;
text-align: center;
}
.cente .onu:nth-child(1) {
transform: rotateY(0deg) translateZ(1000px) scale(1);
}
.cente .onu:nth-child(2) {
transform: rotateY(3deg) translateZ(952px) scale(0.9);
/*opacity: 0.8;*/
}
.cente .onu:nth-child(3) {
transform: rotateY(5deg) translateZ(950px) scale(0.8);
/*opacity: 0.8;*/
}
.cente .onu:nth-child(4) {
transform: rotateY(-5deg) translateZ(950px) scale(0.8);
/*opacity: 0.8;*/
}
.cente .onu:nth-child(5) {
transform: rotateY(-3deg) translateZ(952px) scale(0.9);
/*opacity: 0.8;*/
}
/* 按钮*/
button{
font-size: 20px;
margin-left: 20px;
margin-right: 20px;
}
.twos{
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
<div class="app"> //-----------这里是DOM结构
<!--所有的显示-->
<div @touchstart="chstart" @touchmove="chmove" @touchend="chend" class="cente">
<div ref="every" v-for="(v,i) in 5" class="onu">
<div class="img_li">
<!-- 旁边的带子 -->
<img src="../模拟vue/img/1.png" alt="">
<div class="tisz">X{{i+1}}</div>
</div>
<span class="sp_li">初级福袋</span>
</div>
</div>
<!--左前进和右前进-->
<div class="twos">
<button @click="btn(1)" type="button">左边</button>
<button @click="btn(0)" type="button">右边</button>
</div>
<!---->
</div>
var vm = new Vue({
el : '.app',
data : {
img_list: [img_path+'1.png'],
msg : '文案',
data_list :{
list : [
{rotateY : 0,transfolaZ :1000,size : 1},
{rotateY : 3,transfolaZ :952,size : 0.9},
{rotateY : 5,transfolaZ :950,size : 0.8},
{rotateY : -5,transfolaZ :950,size : 0.8},
{rotateY : -3,transfolaZ :952,size : 0.9}
],
},
chmove_lsit :[],//记录所有移动中的值
start_x :0
},
methods : {
btn : function (inder) {//点击切换
var dom;
const Doms = this.$refs['every'];
if(inder){//右边切换
dom = this.data_list['list'].splice(0,1);
this.data_list['list'].push(dom[0]);
}else {//左边切换
dom = this.data_list['list'].splice(this.data_list['list'].length-1);
this.data_list['list'].unshift(dom[0])
}
this.data_list['list'].forEach((v,i)=>{
Doms[i].style.transform = ' rotateY(' + v['rotateY'] + 'deg) translateZ(' + v['transfolaZ'] + 'px) scale(' + v['size'] + ')'
})
},
chstart : function (e) {//拖拽开始
var ev = e || window.event;
var touch = ev.targetTouches[0];
this.start_x = touch.pageX;
},
chmove : function (e) {//拖拽中
var ev = e || window.event;
var touch = ev.targetTouches[0];
this.chmove_lsit.push(touch.pageX);
},
chend : function (e) {//拖拽结束
var ev = e || window.event;
var touch = ev.changedTouches[0];
if(this.chmove_lsit.length<1||this.chmove_lsit[this.chmove_lsit.length-2]==touch.pageX){
return ;
}
if(this.chmove_lsit[this.chmove_lsit.length-2]>touch.pageX){
this.btn(0)
}else {
this.btn(1)
}
console.log(this.set_tiem);
this.chmove_lsit = []
}
}
});
这里就是完整的JS代码，这里橘色部分只是点击左右进行切换，余下部分是移动端的拖拽，代码还不完全可以适用，不过可以简单实现移动端的拖拽功能，所以如果码工们需要可以自行进行调整和修改，
好了今天的分享就到此为止，我们下次再见。
