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