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 ネットワーク カードの設定の詳細な説明
推薦する
JavaScriptはスライダーを介してWebページの色を変更することを実装します
みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...
Linux でローカル コンピューターとリモート サーバーのポートが接続されているかどうかを確認する方法
以下のように表示されます。 1. ssh -v -p [ポート番号] [ユーザー名]@[IPアドレス...
0.1秒の価値！フロントエンドのウェブページの高速化の問題について簡単に説明します
私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...
mysql5.7.14 解凍版インストールと設定方法 グラフィックチュートリアル (win10)
Win10はmysql5.7の解凍版をインストールします。参考までに、具体的な内容は次のとおりです...
MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要
序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...
MySQL (8 および 5.7) の Docker インストール
この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...
MySQL 高可用性クラスタの展開とフェイルオーバーの実装
目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...
Tomcatサーバーのセキュリティ設定方法
Tomcat は、Java Community Process を通じて Sun が開発した、広く使...
JS は Baidu 検索ボックスを実装します
この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...
フォーム要素の簡単な実装コードでは登録を例に挙げています
コード実装:コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...
Ubuntuでネットワークルーティングテーブルを表示する方法
Linux におけるルーティングとルーティング テーブルとは何ですか?ルーティングのプロセスとは、ネ...
体験をデザインする: ボタンには何があるか
<br />最近、UCDChina は「インターフェース上のテキストに注意を払う」という...
CSSで検索ボックスを非表示にする機能を実装します（アニメーション順方向と逆方向のシーケンス）
上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...
Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法
皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...
vueはel-tableの列幅の適応を完璧に実現します
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...