Exemple de partage de code sur la façon dont vueJs implémente le carrousel d'images

Cet article présente principalement l'exemple de code d'utilisation de vueJs pour implémenter le carrousel picture L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner. comme référence. Suivons l'éditeur pour jeter un œil

J'ai récemment appris vuejs et essayé d'écrire un simple carrousel d'images en utilisant vuejs, j'ai donc fait un simple enregistrement

Seul le carrousel est publié ci-dessous. , d'autres sont omis

<template> 
 <p ref="root">   
  <p class="sliderPanel"> 
   <p v-for="(item,index) in imgArray" class="verticalCenter picbox"> 
    <transition name="slide-fade"> 
      <img :style="{width:width,top:top}" @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" style="min-height: 100%"> 
    </transition> 
   </p> 
  </p> 
  <p @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowLeft verticalCenter horizaCenter"> 
     左移 
  </p> 
  <p @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowRight verticalCenter horizaCenter"> 
    右移 
  </p> 
  <p class="sliderBar horizaCenter"> 
   <p v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" class="circle" :class="{circleSelected:index===selectIndex}"> 
   </p> 
  </p> 
 </p> 
</template> 
<script> 
 const SCREEN_WIDTH=document.body.clientWidth//网页可见区域宽 
 const SCREEN_HEIGHT=document.body.scrollHeight//网页正文全文高 
 var selectIndex=0 
 var timer=null 
 export default { 
  name: "ErCarousel", 
  data() { 
    return { 
         selectIndex:0, 
          width:&#39;100%&#39;, 
      height:SCREEN_HEIGHT+&#39;px&#39;, 
      top:0, 
      imgArray:[ 
       { 
        url:&#39;/src/components/carousel/image/1.jpg&#39;, 
       }, 
       { 
        url:&#39;/src/components/carousel/image/2.jpg&#39;, 
       }, 
       { 
        url:&#39;/src/components/carousel/image/3.jpg&#39;, 
       } 
      ] 
    } 
  }, 
  methods:{ 
     slideAuto:function () { 
      var that=this; 
    timer=setInterval(function(){  
      that.clickRight();    
   },3000) 
    //clearInterval(timer); 
   }, 
   clearAuto:function(){ 
    clearInterval(timer); 
   }, 
     clickLeft:function(){ 
      if(this.selectIndex==0){ 
        this.selectIndex=this.imgArray.length-1; 
      }else{ 
        this.selectIndex--; 
      } 
      console.log(this.selectIndex); 
      
   }, 
   clickRight:function(){ 
    if(this.selectIndex==this.imgArray.length-1){ 
        this.selectIndex=0; 
      }else{ 
        this.selectIndex++; 
      } 
   }, 
   setIndex:function (index) { 
    this.selectIndex=index; 
   } 
  }, 
  mounted:function(){ 
  this.slideAuto();   
  } 
} 
 
</script> 
<style>

Le module entier est également divisé en trois parties : modèle, script et style. Il présente brièvement la commutation gauche et droite des images, l'effet de glissement CSS, etc. c'est purement pour la pratique.

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!