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  src="/static/imghwm/default1.png"  data-src="imgArray[nowindex]"  class="lazy"  v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39; alt="vue.jsでカルーセル画像を記述する方法" >
</transition>
<transition name="slide-trans-old">
  <img  src="/static/imghwm/default1.png"  data-src="imgArray[nowindex]"  class="lazy"  v-if="!ifshow" : alt="vue.jsでカルーセル画像を記述する方法" >
 </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 サイトの他の関連記事を参照してください。