Maison > interface Web > Voir.js > Comment écrire une image de carrousel dans vue.js

Comment écrire une image de carrousel dans vue.js

coldplay.xixi
Libérer: 2020-11-30 15:20:12
original
3109 Les gens l'ont consulté

Comment écrire une image de carrousel dans vue.js : écrivez d'abord le framework global ; puis définissez le tableau d'images de carrousel et téléchargez enfin les images de carrousel en modifiant la variable personnalisée nowindex .

Comment écrire une image de carrousel dans vue.js

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Recommandations d'articles connexes : vue.js]

Comment écrire une image de carrousel dans vue.js :

Parlons d'une idée simple. Utilisez v-if ou v-show pour remplacer le glissement JS d'origine pour le carrousel d'images. L'effet de transition peut être facilement obtenu avec la transition. pendant le processus de glissement, il y a deux images, donc deux transitions sont nécessaires.

(1) Écrivez d'abord le cadre global

<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>
Copier après la connexion

Rendu le nombre de petits points en fonction du tableau de photos imgArray, liez-vous à la travée pour éclairer les petits points, photo L'affichage et masquage sont affichés via la variable personnalisée ifshow, et nowindex contrôle les photos correspondant au carrousel.

(2) Si le tableau d'images du carrousel est une image locale et n'est pas placé sous un fichier statique, veuillez encercler le chemin avec require, sinon le chemin signalera une erreur. Non requis s’il est obtenu à partir du serveur principal.

data(){
return{
imgArray: [
require(&#39;../../img/item_01.png&#39;),
require(&#39;../../img/item_02.png&#39;),
require(&#39;../../img/item_03.png&#39;),
require(&#39;../../img/item_04.png&#39;)
]
}
}
Copier après la connexion

(3) L'objectif principal est de changer le statut de l'image du carrousel en modifiant la variable personnalisée nowindex. Il convient de noter que deux images peuvent être vues pendant le processus de glissement, donc un court timing est défini. dans la fonction goto, l'appareil permet d'afficher l'un et de masquer l'autre, et différents effets de transition peuvent être ajoutés à chacun.

<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>
Copier après la connexion

C'est la fin de cette simple image de carrousel.

Recommandations d'apprentissage gratuites associées : JavaScript(Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal