vueJs가 이미지 캐러셀을 구현하는 방법에 대한 예제 코드 공유

이 글에서는 vueJs를 사용하여 picturecarousel을 구현하는 예제 코드를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터 따라가서 살펴볼까요

최근에 vuejs를 배우고 vuejs를 이용하여 간단한 그림 캐러셀을 작성해보려고 간단하게 기록을 해봤습니다

아래 carousel.vue 코드만 올리고 나머지는 생략합니다

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

전체 모듈도 템플릿, 스크립트, 스타일의 세 부분으로 나누어져 있습니다. 이미지의 왼쪽과 오른쪽 전환, CSS 슬라이딩 효과 등을 간략하게 소개합니다. 순전히 연습용입니다.

위 내용은 vueJs가 이미지 캐러셀을 구현하는 방법에 대한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!