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代码，这里橘色部分只是点击左右进行切换，余下部分是移动端的拖拽，代码还不完全可以适用，不过可以简单实现移动端的拖拽功能，所以如果码工们需要可以自行进行调整和修改，

好了今天的分享就到此为止，我们下次再见。