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 ネットワーク カードの設定の詳細な説明
推薦する
Mysql 中国語ソートルールの説明
MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...
Linuxプロセスネットワークトラフィック統計の実装プロセス
序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...
セマンティックウェブページ XHTML セマンティックマークアップ
構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...
WeChatアプレットが複数行テキストのスクロール効果を実現
この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...
ウェブ音楽プレーヤーを実現する js
この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...
Reactにおける不変値の説明
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
jQuery カスタム虫眼鏡効果
この記事の例では、jQueryのカスタム虫眼鏡効果の具体的なコードを参考までに共有しています。具体的...
Vueコンポーネントの再利用と拡張の詳細な説明
目次概要延長は必要ですか？スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...
Dockerでホストファイルをカスタマイズする方法について簡単に説明します
目次1. コマンド2. docker-compose.yml 3. Dockerファイル4. 直接変...
Linux システムでの Selenium クローラー プログラムの導入の概要
目次序文1. セレンとは何ですか? 2. 使用手順1. ライブラリをインポートする2. テストコード...
Windows での MySQL 8.X インストール チュートリアル
以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...
ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い
概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティス...
MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています
MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...
CSS で動的な画像の 9 グリッド レイアウトを実装するためのサンプル コード
前提条件: content="width=750" <meta name=...
CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。
なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...