So schreiben Sie ein Karussellbild in vue.js

So schreiben Sie ein Karussellbild in vue.js: Schreiben Sie zuerst das Gesamtgerüst. Definieren Sie dann das Array von Karussellbildern und ändern Sie schließlich den Status des Karussellbilds, indem Sie die benutzerdefinierte Variable nowindex ändern.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

vue.js So schreiben Sie ein Karussellbild:

Lassen Sie mich über die einfache Idee sprechen, v-if或者v-show zu verwenden, um die ursprünglichen Js für Karussell zu ersetzen Gleit- und Übergangseffekte lassen sich leicht mit Übergängen erzielen. Beachten Sie, dass während des Gleitvorgangs zwei Bilder sichtbar sind.

(1) Schreiben Sie zuerst das Gesamtgerüst

<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39;>
</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>

Rendern Sie die Anzahl der kleinen Punkte entsprechend der Anordnung der imgArray-Fotos, binden Sie sie an die Spanne, um die kleinen Punkte zum Leuchten zu bringen, und zeigen Sie die Fotos über die benutzerdefinierte Variable ifshow an und aus und verbergen Sie sie Zur Anzeige steuert nowindex die dem Karussell entsprechenden Fotos.

(2) Wenn es sich bei der Reihe von Karussellbildern um ein lokales Bild handelt und nicht unter einer statischen Datei platziert ist, kreisen Sie den Pfad bitte mit „require“ ein, andernfalls meldet der Pfad einen Fehler. Nicht erforderlich, wenn es vom Backend-Server bezogen wird.

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

(3) Der Hauptzweck besteht darin, den Status des Karussellbilds durch Ändern der benutzerdefinierten Variablen nowindex zu ändern. Es ist zu beachten, dass während des Schiebevorgangs zwei Bilder angezeigt werden, sodass in der Goto-Funktion ein kurzer Timer eingestellt ist Damit wird einer angezeigt und der andere ausgeblendet, jeweils mit unterschiedlichen Übergangseffekten.

<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>

Hier endet dieses einfache Karussellbild.

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein Karussellbild in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!