Vueはカルーセルアニメーションを実装します

この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

画像の数は任意の値（1～無制限）にすることができます。

<!DOCTYPE html>
<html>
<ヘッド>
    <タイトル></タイトル>
    <メタ文字セット="UTF-8">
    <meta http-equiv="アクセス制御許可オリジン" content="*">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <スタイル>
        html,本文{
            フォントサイズ: 100px;
        }
        html,本文{
            幅: 100%;
            高さ: 100%;
            オーバーフロー: 非表示;
        }
        .フィルムボックス{
            幅:100%;
            高さ: 100%;
        }
        ul{
            位置: 相対的;
            幅: 100%;
            リストスタイル: なし;
        }
        ul li {
            位置: 絶対;
            上: 0;
            左: 0;
            zインデックス: 1;
            幅:0rem;
            高さ: 0rem;
            テキスト配置: 中央;
        }
        ul li.film-show{
            遷移: すべて 1;
            幅: 87rem;
            高さ：50rem;
        }
        ul li img {
            /* 幅: 100%; */
            高さ: 100%;
        }

        /* 左矢印と右矢印 */
        .矢印{
            位置: 絶対;
            幅: 100%;
            上位: 50%;
            /* 不透明度: 0; */
            zインデックス: 3;
        }
        .前へ,.次へ {
            位置: 絶対;
            高さ：5rem;
            幅: 3rem;
            境界線の半径: 50%;
            上位: 50%;
            上マージン: -56px;
            オーバーフロー: 非表示;
            テキスト装飾: なし;
        }
        .前へ{
            左: 0;
            背景: url("./imgs/arrow-left.png") 繰り返しなし 左上;
            背景サイズ: 100% 100%;
        }
        。次{
            右: 0;
            背景: url("./imgs/arrow-right.png") 繰り返しなし 右上;
            背景サイズ: 100% 100%;
        }

        .filmindex{
            色: #cb2e2e;
            フォントサイズ: 2.4rem;
            位置: 絶対;
            下部：12rem;
            左: 50%;
            変換: translateX(-50%);
        }
    </スタイル>
</head>
<本文>
    <div class="film-box" id='app'>
        <ul id="スライド">
            <li v-for='(item,index) 映画内' 
                :key='インデックス'
                v-bind:class="item.show?'film-show':''"
                v-bind:style="{left:filmsHideLeft}" 
                v-bind:data-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>
</本文>
<スクリプト>
    var vm = 新しい Vue({
        el:'#app',
        データ：{
            映画:[],
            filmsHideLeft:'0rem', // 非表示の画像が左上隅からポップアップするか、右上隅からポップアップするかを制御します configStart:0,
            フィルムカレントインデックス:2,
            設定:[
                {
                    "変換":"スケール(0.6)",
                    "トップ": '5rem',
                    "左": '-13rem',
                    "zインデックス": 2,
                    "背景色":"#98E0AD"
                }, //0
                {
                    "変換":"スケール(0.8)",
                    "トップ": '3rem',
                    "左": '13rem',
                    "zインデックス": 3,
                    "背景色":"#BAD1F0"
                }, //1
                {
                    "変換":"スケール(1)",
                    "トップ": '2rem',
                    "左": '45rem',
                    "zインデックス": 4,
                    "背景色":"#F3DFDE"
                }, //2
                {
                    "変換":"スケール(0.8)",
                    "トップ": '3rem',
                    "左": '93rem',
                    "zインデックス": 3,
                    "背景色":"#BAD1F0"
                }, //3
                {
                    "変換":"スケール(0.6)",
                    "トップ": '5rem',
                    "左":'113rem',
                    "zインデックス": 2,
                    "背景色":"#98E0AD"
                }, //4
            ]、
          少ない数:0,
        },
        方法:{
         次（）{
                if (this.lessNum < 5) {
                    this.nextFilmLessFive();
                } それ以外 {
                    this.nextFilm();
                }
            },
            最後（）{
                if (this.lessNum < 5) {
                    this.lastFilmLessFive();
                } それ以外 {
                    this.lastFilm();
                }
            },
            次のフィルム(){
                自分自身 = this とします。
                this.filmsHideLeft = '185rem';
                currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index); とします。
                // 最後のものが真ん中にある場合、次のものを押しても反応しなくなります console.log(currShowFirst,self.films.length)
                （currShowFirst + 3 == self.films.length）の場合{
                    戻る;
                }
                // DOMの表示と非表示を変更する if (self.configStart == 0) {
                    self.films[currShowFirst].show = false; 
                    if (currShowFirst + 5 <= this.films.length - 1){// 最後から2番目の画像または最後から1番目の画像が中央に表示される場合、押したときにどちらを表示するかをtrueに設定する必要はない。
                        self.films[currShowFirst + 5].show = true;
                    }
                }そうでない場合 (self.configStart == 1) {
                    self.films[4].show = true;
                    自己.config開始 = 0;
                } そうでない場合(self.configStart == 2){
                    self.films[3].show = true;
                    自己.config開始 = 1;
                }
                
                コンソールログ(self.films)
                自己.$nextTick(関数(){
                    // DOM の left、top、scale、zIndex、backgroundColor を変更します
                    this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
                    自分自身に代入する();
                })
            },
            ラストフィルム(){
                自分自身 = this とします。
                this.filmsHideLeft = '0rem';
                currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index); とします。
                （currShowFirst !== 0）の場合{ 
                    self.films[currShowFirst -1].show = true;
                    if (currShowFirst + 4 <= this.films.length -1) { // 最後から2番目の画像または最後から1番目の画像が中央に表示される場合、前の画像を押したときにどの画像を表示するかをfalseに設定する必要はありません。
                        self.films[currShowFirst + 4].show = false;
                    }
                } それ以外 {
                    （self.configStart == 0）の場合{
                        自己.config開始 = 1;
                        self.films[4].show = false;
                    } そうでない場合 (self.configStart == 1) {
                        自己.config開始 = 2;
                        self.films[3].show = false;
                    } それ以外 {
                        // 最初のボタンが中央にある場合、前のボタンを押しても反応しなくなります。
                    }
                }
                コンソールログ(self.films)
                自己.$nextTick(関数(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    自分自身に代入する();
                })
            },
           ラストフィルムレスファイブ(){
                currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index); とします。
                if (this.lessNum === 4) {
                    if (!this.films[0].show) {
                        this.films[0].show = true;
                    } それ以外 {
                        this.configStart === 2 の場合、戻り値:
                        if (this.configStart === 0) {
                            this.config開始 = 1;
                        } それ以外の場合 (this.configStart === 1) {
                            this.config開始 = 2;
                            this.films[3].show = false
                        }  
                    }                           
                } そうでない場合 (this.lessNum === 3) {
                    if (this.configStart === 1) {
                        this.config開始 = 2;
                    } そうでない場合 (this.configStart === 0) {
                        this.config開始 = 1;
                    }
                } それ以外の場合 (this.lessNum === 2) {
                    if (this.configStart === 1) {
                        this.config開始 = 2;
                    } 
                }
                this.$nextTick(関数(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    これを代入します。
                })
            },
           次のFilmLessFive(){
                currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index); とします。
                if (this.lessNum === 4) {
                    if (!this.films[0].show) 戻り値:
                    if (this.configStart === 2) {
                        this.config開始 = 1;
                        this.films[3].show = true;
                    } それ以外の場合 (this.configStart === 1) {
                        this.config開始 = 0;
                    } それ以外 {
                        this.films[0].show = false;
                    }           
                } そうでない場合 (this.lessNum === 3) {
                    if (this.configStart === 1) {
                        this.config開始 = 0;
                    } そうでない場合 (this.configStart === 2) {
                        this.config開始 = 1;
                    }
                } それ以外の場合 (this.lessNum === 2) {
                    if (this.configStart === 2) {
                        this.config開始 = 1;
                    } 
                }
                this.$nextTick(関数(){
                    console.log(this.filmCurrIndex、this.films.length) を実行します。
                    this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
                    これを代入します。
                })
            },
            割り当て() { 
                自分自身 = this とします。
                var list = document.getElementById("slide").getElementsByClassName("film-show"); //すべてのリストを取得
                (var i = 0; i < list.length; i++){
                    json = self.config[i + this.configStart] とします。
                    for (var attr in json) {
                        リスト[i].style[attr] = json[attr];
                    }
                }
            }
        },
        マウントされた(){
            this.films = this.films.concat([
               {画像:'./imgs/9.jpeg',表示:true},
                {画像:'./imgs/1.jpg',表示:true},
                {画像:'./imgs/2.jpg',表示:true},
                {画像:'./imgs/3.jpg',表示:true},
                {画像:'./imgs/4.jpg',表示:true},
                // {画像:'./imgs/5.jpg',表示:false},
                // {画像:'./imgs/6.jpg',表示:false},
                // {画像:'./imgs/7.jpg',表示:false},
                // {画像:'./imgs/8.jpg',表示:false},
            ]);
            this.$nextTick(関数(){
             this.lessNum = this.films.length;
                if (this.lessNum === 3) {
                    this.config開始 = 1;
                    this.filmCurrIndex = 1;
                }
                if (this.lessNum === 2) {
                    this.config開始 = 2;
                    this.filmCurrIndex = 0;
                }
                if (this.lessNum === 1) {
                    this.config開始 = 2;
                    this.filmCurrIndex = 0;
                }
                これを代入します。
            })
            
        },
        作成された(){
            rootWidth を document.documentElement.clientWidth || document.body.clientWidth とします。
            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);
        関数ダウン(イベント){
            touchDot = event.clientX; // タッチの原点を取得する}
        関数move(イベント){
            タッチドットが未定義の場合{
                var touchMove = event.clientX;
                // 左にスライド if (touchMove - touchDot <= -40) {
                    if (フラグ左) {
                        vm.nextFilm();
                        flagLeft = false; // マウスを離す前に、1 つの画像だけを左にスワイプできます。 flagRight = true; // マウスを左にスワイプして画像を切り替えた後、マウスを離す前にもう一度右にスワイプして前の画像に戻ることができます。 } else {
                        タッチドット = タッチ移動;
                    }
                }
                // 右にスライド if (touchMove - touchDot >= 40) {
                    if (フラグ右) {
                        vm.lastFilm();
                        flagRight = false; // マウスを離す前に右にスワイプすると、1 つの画像のみを右にスライドできます。 flagLeft = true; // 右にスワイプして画像を切り替えた後、マウスを離す前にもう一度左にスワイプすると、前の画像に戻ることができます。 } else {
                        タッチドット = タッチ移動;
                    }
                }
            }
        }
        関数 up(イベント){
            // マウスを離すとすべてがリセットされ、次のステップに進みます。
            フラグ右 = true;
            フラグ左 = true;
            タッチドット = 未定義;
        }
    }())
</スクリプト>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: