Example code sharing of how vueJs implements image carousel-JS Tutorial-php.cn

Example code sharing of how vueJs implements image carousel

黄舟

Release： 2017-06-04 10:47:27

Original

1513 people have browsed it

This article mainly introduces the example code of using vueJs to realize picture carousel. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

I recently learned vuejs and tried to write a simple picture carousel using vuejs, so I made a simple record

Only the carousel is posted below. vue code, others are omitted

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

Copy after login

The entire module is also divided into three parts: template, script, and style. It briefly introduces the left and right switching of images, as well as the CSS sliding effect, etc. It is purely for practice.

The above is the detailed content of Example code sharing of how vueJs implements image carousel. For more information, please follow other related articles on the PHP Chinese website!