Beispielcode-Sharing, wie vueJs das Bildkarussell implementiert

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von vueJs zur Implementierung des Bild-Karussells vorgestellt. Der Herausgeber findet ihn ziemlich gut, daher werde ich ihn jetzt mit Ihnen teilen und weitergeben als Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen

Ich habe kürzlich Vuejs gelernt und versucht, ein einfaches Bildkarussell mit Vuejs zu schreiben, also habe ich einen einfachen Datensatz erstellt

Nur der Vue-Code wird unten gepostet , andere werden weggelassen

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

Das gesamte Modul ist außerdem in drei Teile unterteilt: Vorlage, Skript und Stil. Es führt kurz in das Umschalten von Bildern nach links und rechts sowie in den CSS-Gleiteffekt usw. ein ist reine Übungssache.

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing, wie vueJs das Bildkarussell implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!