vue实现旋转木马动画

2024-04-02 19:04:59 942人浏览泡泡鱼

摘要

本文实例为大家分享了Vue实现旋转木马动画的具体代码，供大家参考，具体内容如下图片数量可为任意值都能正常处理 [1-无限个]： <!DOCTYPE html> &l

本文实例为大家分享了Vue实现旋转木马动画的具体代码，供大家参考，具体内容如下

图片数量可为任意值都能正常处理 [1-无限个]：


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta Http-equiv="Access-Control-Allow-Origin" content="*">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,body{
            font-size: 100px;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .film-box{
            width:100%;
            height: 100%;
        }
        ul{
            position: relative;
            width: 100%;
            list-style: none;
        }
        ul li {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width:0rem;
            height: 0rem;
            text-align: center;
        }
        ul li.film-show{
            transition: all 1s;
            width: 87rem;
            height: 50rem;
        }
        ul li img {
            
            height: 100%;
        }

        
        .arrow {
            position: absolute;
            width: 100%;
            top: 50%;
            
            z-index: 3;
        }
        .prev,.next {
            position: absolute;
            height: 5rem;
            width: 3rem;
            border-radius: 50%;
            top: 50%;
            margin-top: -56px;
            overflow: hidden;
            text-decoration: none;
        }
        .prev{
            left: 0;
            background: url("./imgs/arrow-left.png") no-repeat left top;
            background-size: 100% 100%;
        }
        .next{
            right: 0;
            background: url("./imgs/arrow-right.png") no-repeat right top;
            background-size: 100% 100%;
        }

        .filmindex{
            color: #cb2e2e;
            font-size: 2.4rem;
            position: absolute;
            bottom: 12rem;
            left: 50%;
            transfORM: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="film-box" id='app'>
        <ul id="slide">
            <li v-for='(item,index) in films' 
                :key='index'
                v-bind:class="item.show ? 'film-show' : ''"
                v-bind:style="{left:filmsHideLeft}" 
                v-bind:data-index = 'index' >
                 <img v-bind:src="item.image"  alt="">
            </li>
        </ul>
        <span class="filmindex">{{ filmCurrIndex + 1 + '/' + films.length}}</span>
        <div class="arrow" id="arrow">
            <a href="javascript:;" id="arrPrev" class="prev" @click='last'></a>
            <a href="javascript:;" id="arrNext" class="next" @click='next'></a>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            films:[],
            filmsHideLeft:'0rem',//控制隐藏图片是从左上角跳出来还是从右上角跳出来
            configStart:0,
            filmCurrIndex:2,
            config:[
                {
                    "transform":"scale(0.6)",
                    "top": '5rem',
                    "left": '-13rem',
                    "zIndex": 2,
                    "backgroundColor":"#98E0AD"
                },      //0
                {
                    "transform":"scale(0.8)",
                    "top": '3rem',
                    "left": '13rem',
                    "zIndex": 3,
                    "backgroundColor":"#BAD1F0"
                },     //1
                {
                    "transform":"scale(1)",
                    "top": '2rem',
                    "left": '45rem',
                    "zIndex": 4,
                    "backgroundColor":"#F3DFDE"
                },     //2
                {
                    "transform":"scale(0.8)",
                    "top": '3rem',
                    "left": '93rem',
                    "zIndex": 3,
                    "backgroundColor":"#BAD1F0"
                },    //3
                {
                    "transform":"scale(0.6)",
                    "top": '5rem',
                    "left":'113rem',
                    "zIndex": 2,
                    "backgroundColor":"#98E0AD"
                },    //4
            ],
          lessNum:0,
        },
        methods:{
         next(){
                if (this.lessNum < 5) {
                    this.nextFilmLessFive();
                } else {
                    this.nextFilm();
                }
            },
            last(){
                if (this.lessNum < 5) {
                    this.lastFilmLessFive();
                } else {
                    this.lastFilm();
                }
            },
            nextFilm(){
                let self = this;
                this.filmsHideLeft = '185rem';
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                // 最后一个位于正中央时按下一个不再反应
                console.log(currShowFirst,self.films.length)
                if (currShowFirst + 3 == self.films.length){
                    return;
                }
                // 改变DOM的显示与隐藏
                if (self.configStart == 0) {
                    self.films[currShowFirst].show = false; 
                    if (currShowFirst + 5 <= this.films.length - 1){// 正中央显示的是倒数第二张或倒数第一张时，按下一个不需要设置哪张显示成true
                        self.films[currShowFirst + 5].show = true;
                    }
                }else if (self.configStart == 1) {
                    self.films[4].show = true;
                    self.configStart = 0;
                } else if(self.configStart == 2){
                    self.films[3].show = true;
                    self.configStart = 1;
                }
                
                console.log(self.films)
                self.$nextTick(function(){
                    // 改变DOM的left,top,scale,zIndex,backgroundColor
                    this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
                    self.assign();
                })
            },
            lastFilm(){
                let self = this;
                this.filmsHideLeft = '0rem';
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                if (currShowFirst !== 0) { 
                    self.films[currShowFirst -1].show = true;
                    if (currShowFirst + 4 <= this.films.length -1) {// 正中央显示的是倒数第二张或倒数第一张时，按上一个不需要设置哪张显示成false
                        self.films[currShowFirst + 4].show = false;
                    }
                } else {
                    if (self.configStart == 0) {
                        self.configStart = 1;
                        self.films[4].show = false;
                    } else if (self.configStart == 1) {
                        self.configStart = 2;
                        self.films[3].show = false;
                    } else {
                        // 第一个位于正中央时按上一个不再反应
                        return;
                    }
                }
                console.log(self.films)
                self.$nextTick(function(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    self.assign();
                })
            },
           lastFilmLessFive(){
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                if (this.lessNum === 4) {
                    if (!this.films[0].show) {
                        this.films[0].show = true;
                    } else {
                        if (this.configStart === 2) return;
                        if (this.configStart === 0) {
                            this.configStart = 1;
                        } else if (this.configStart === 1) {
                            this.configStart = 2;
                            this.films[3].show = false
                        }  
                    }                           
                } else if (this.lessNum === 3) {
                    if (this.configStart === 1) {
                        this.configStart = 2;
                    } else if (this.configStart === 0) {
                        this.configStart = 1;
                    }
                } else if (this.lessNum === 2) {
                    if (this.configStart === 1) {
                        this.configStart = 2;
                    } 
                }
                this.$nextTick(function(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    this.assign();
                })
            },
           nextFilmLessFive(){
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                if (this.lessNum === 4) {
                    if (!this.films[0].show) return;
                    if (this.configStart === 2) {
                        this.configStart = 1;
                        this.films[3].show = true;
                    } else if (this.configStart === 1) {
                        this.configStart = 0;
                    } else {
                        this.films[0].show = false;
                    }           
                } else if (this.lessNum === 3) {
                    if (this.configStart === 1) {
                        this.configStart = 0;
                    } else if (this.configStart === 2) {
                        this.configStart = 1;
                    }
                } else if (this.lessNum === 2) {
                    if (this.configStart === 2) {
                        this.configStart = 1;
                    } 
                }
                this.$nextTick(function(){
                    console.log(this.filmCurrIndex,this.films.length)
                    this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
                    this.assign();
                })
            },
            assign() { 
                let self = this;
                var list= document.getElementById("slide").getElementsByClassName("film-show"); //拿到所有li
                for (var i = 0; i < list.length; i++){
                    let JSON = self.config[i + this.configStart];
                    for (var attr in json) {
                        list[i].style[attr] = json[attr];
                    }
                }
            }
        },
        mounted(){
            this.films = this.films.concat([
               {image:'./imgs/9.jpeg',show:true},
                {image:'./imgs/1.jpg',show:true},
                {image:'./imgs/2.jpg',show:true},
                {image:'./imgs/3.jpg',show:true},
                {image:'./imgs/4.jpg',show:true},
                // {image:'./imgs/5.jpg',show:false},
                // {image:'./imgs/6.jpg',show:false},
                // {image:'./imgs/7.jpg',show:false},
                // {image:'./imgs/8.jpg',show:false},
            ]);
            this.$nextTick(function(){
             this.lessNum = this.films.length;
                if (this.lessNum === 3) {
                    this.configStart = 1;
                    this.filmCurrIndex = 1;
                }
                if (this.lessNum === 2) {
                    this.configStart = 2;
                    this.filmCurrIndex = 0;
                }
                if (this.lessNum === 1) {
                    this.configStart = 2;
                    this.filmCurrIndex = 0;
                }
                this.assign();
            })
            
        },
        created(){
            let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
            let rootDom = document.querySelector('html');
            rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';
        }
    });

  // 功能增强(以上部分已经实现了旋转木马)：
  // 以下代码实现目标：鼠标模拟移动端的左滑右滑事件，在左滑右滑中可以切换图片
    (function(){
        var touchDot,flagLeft = true,flagRight = true; 
        var bodyDom = document.querySelector('body');
        bodyDom.addEventListener('mousedown',down,false);
        bodyDom.addEventListener('mousemove',move,false);
        bodyDom.addEventListener('mouseup',up,false);
        bodyDom.addEventListener('mouseout',up,false);
        function down(event){
            touchDot = event.clientX; // 获取触摸时的原点 
        }
        function move(event){
            if (touchDot !== undefined) {
                var touchMove = event.clientX;
                // 向左滑动  
                if (touchMove - touchDot <= -40) {
                    if (flagLeft) {
                        vm.nextFilm();
                        flagLeft = false;// 鼠标未抬起之前持续左滑最多只能左滑一张图片
                        flagRight = true;// 鼠标左滑切换图片后，鼠标未抬起之前可以通过再右滑切换回到之前的图片
                    } else {
                        touchDot = touchMove;
                    }
                }
                // 向右滑动 
                if (touchMove - touchDot >= 40) {
                    if (flagRight) {
                        vm.lastFilm();
                        flagRight = false; // 鼠标未抬起之前持续右滑最多只能右滑一张图片
                        flagLeft = true;// 鼠标右滑切换图片后，鼠标未抬起之前可以通过再左滑切换回到之前的图片
                    } else {
                        touchDot = touchMove;
                    }
                }
            }
        }
        function up(event){
            // 鼠标抬起重置一切可以进行下一步操作;
            flagRight = true;
            flagLeft = true;
            touchDot = undefined;
        }
    }())
</script>
</html>