怎么用vue实现旋转木马动画

发布时间:2022-04-18 17:32:46 作者:zzz
来源:亿速云 阅读:286

这篇“怎么用vue实现旋转木马动画”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用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 {
            /* width: 100%; */
            height: 100%;
        }

        /* 左右箭头 */
        .arrow {
            position: absolute;
            width: 100%;
            top: 50%;
            /* opacity: 0; */
            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>

以上就是关于“怎么用vue实现旋转木马动画”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. vue实现鼠标经过动画
  2. Vue如何实现动画效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:怎么用Vue组件实现旋转木马动画

下一篇:vue怎么执行外部函数

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》