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 ネットワーク カードの設定の詳細な説明
推薦する
CSS スタイルを使用して表のフォントを垂直中央に配置する方法
CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。下図のようなカ...
VMware vSAN 入門概要
1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...
Linux ユーザーとグループのコマンド例分析 [切り替え、ユーザーの追加、権限制御など]
この記事では、Linux のユーザーおよびグループのコマンドについて例を挙げて説明します。ご参考まで...
Dockerデータボリューム操作の実装
データボリュームの使用開始先ほどのケースでは、ホストからコンテナにデータをコピーする必要がある場合、...
Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説
目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...
幅の比率に応じて高さを変えるCSSを実装するいくつかの方法
[解決策1: パディングの実装]原理：要素の padding の値がパーセンテージの場合、このパーセ...
Celery と Docker を使用して Django で定期的なタスクを処理する方法
Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...
nginx リバース プロキシでの proxy_pass の実装
フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...
jsはreduceメソッドを使用してコードをよりエレガントにします
序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...
Vue3の一般的なAPIの使用方法の紹介
目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...
Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル
1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...
tomcat デプロイメント プロジェクトの実装と IDEA との統合
目次Tomcat でプロジェクトを展開する 3 つの方法プロジェクトをwebappsディレクトリに直...
サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
円形グラデーションプログレスバー効果を実現する CSS サンプルコード
実装のアイデア一番外側は大きな円（グラデーションカラー）グラデーションの円を覆うように、内側に半円を...
ウェブデザインと制作におけるハイパーリンクの効果の向上
ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...