ホームページ > 記事 > ウェブフロントエンド > vue.jsでカルーセル画像を記述する方法
カルーセル チャートを作成するための Vue.js メソッド: 最初に全体的なフレームワークを作成し、次にカルーセル チャートの配列を定義してローカル画像をアップロードし、最後にカスタム変数 nowindex を変更してカルーセル チャートのステータスを変更します。
このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。
[関連記事の推奨: vue.js]
#vue.js でカルーセル画像を記述する方法:
シンプルなアイデアについて話しましょう。元の Js スライドの代わりに画像カルーセルに v-if
または v-show
を使用し、トランジションにトランジションを使用します。スライド処理中は 2 つの画像が表示されるため、トランジションを 2 つ使用する必要があることに注意してください。
(1) まず全体的なフレームワークを記述します
<template> <div class="slide-show"> <div class="slide-img"> <transition name="slide-trans" > <img v-if='ifshow' :src='imgArray[nowindex]'> </transition> <transition name="slide-trans-old"> <img v-if="!ifshow" :src="imgArray[nowindex]"> </transition> <ul class="slide-pages"> <li v-for="(item,index) in imgArray"> <span :class="{on :index===nowindex}" @click="goto(index)"></span> </li> </ul> </div> </div> </template>
imgArray 写真の配列に基づいて小さなドットの数をレンダリングし、スパンにバインドして小さなドットを点灯させます。写真のディスプレイおよび非表示はカスタム変数 ifshow を通じて表示され、nowindex はカルーセルに対応する写真を制御します。
(2) カルーセル画像の配列がローカル画像であり、静的ファイルの下に配置されていない場合は、パスを require で丸で囲んでください。そうでない場合、パスはエラーを報告します。バックエンドサーバーから取得した場合は不要です。
data(){ return{ imgArray: [ require('../../img/item_01.png'), require('../../img/item_02.png'), require('../../img/item_03.png'), require('../../img/item_04.png') ] } }
(3) カスタム変数nowindexを変更することでカルーセル画像の状態を変更するのが主な目的ですが、スライド処理中に2枚の画像が表示されるため、短いタイミングで設定されています。このデバイスでは、一方を表示し、もう一方を非表示にすることができ、それぞれに異なるトランジション効果を追加できます。
<script type="text/javascript"> export default { props:{ imgArray:{ type:Array, default:[] } }, data() { return { ifshow:true, nowindex:0, } }, created(){ this.timerun() }, computed:{ nextindex(){ if(this.nowindex === this.imgArray.length -1){ return 0 }else{ return this.nowindex + 1 } } }, methods: { goto(index){ let that = this; this.ifshow = false; setTimeout(function(){ that.ifshow = true; that.nowindex = index; },100) }, timerun(){ let that = this; setInterval(function(){ that.goto(that.nextindex) },2000) } } } </script>
ここで、この単純なカルーセル画像は終了します。
関連する無料学習の推奨事項: JavaScript(ビデオ)
以上がvue.jsでカルーセル画像を記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。