この記事では、カルーセルアニメーションを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysqlとnavicat間の接続を確立する際の1251エラーを解決する
>>: CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワーク カードの設定の詳細な説明
目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...
目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...
Centos7では、/etc/rc.d/rc.localファイルの権限が削減されており、実行権限があ...
問題の説明body内でfilter属性を使用すると、 fixed要素の位置が不正確になります。つまり...
SQLのlike文では、例えば SELECT * FROM user WHERE username...
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...
水平方向では、テーブルの配置を左、中央、右に設定できます。基本的な構文<テーブル配置=&quo...
1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...
この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...
SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...
目次1. ステートメントを挿入する1.1 行を挿入する1.2 複数行を挿入する1.3 クエリステート...
はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...
ルートジャンプ this.$router.push('/course'); this...
MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...