First, we set three variables

Multicast graph array, current position, timer object

  data() {
    return {
      data: [
        '../../image/home/banner.jpeg',
        '../../image/home/banner.jpeg',
        '../../image/home/banner.jpeg'
      ],
      currentIndex: 0,
      timer: null,
      islogin: getToken()
    }
  },
Copy the code

Two, the basic style

We define a big box to wrap around, and then the child elements a box to hold the image and a box to hold the switch styles

<template> <div class="banner"> <div class="item"> <img :src="data[currentIndex]"> </div> <div class="page" v-if="this.data.length > 1"> <ul> <li @click="gotoPage(prevIndex)">&lt; </li> <li v-for="(item,index) in data" @click="gotoPage(index)" :class="{'current':currentIndex == index}"> {{index+1}}</li> <li @click="gotoPage(nextIndex)">&gt; </li> </ul> </div> </div> </template>Copy the code

So far it looks like a mess, and then we’ll optimize the style

3. Repair styles

Mask style at the bottom, page on the right, mouse slide to show clickable effect, font color

<style lang="scss" scoped>
.banner {
  position: relative;          
  margin-bottom: 0.7rem;       
    .current {                 
      color: #ff6700;          
    }
    .page {                    
      background: rgba(0,0,0,.5);     
      position: absolute;
      right: 0;                
      bottom: 0;               
      width: 100%;             
        ul{                    
          float: right;        
        }
    }
    ul li {                    
      list-style: none;        
      float: left;             
      width: 30px;             
      height: 40px;            
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      color: rgba(255,255,255,.8);    
      font-size: 14px;
    }
}
.banner img {
  width: 100%;
  max-height: 680px;
}
</style> 
Copy the code

As a backend, it is not sensitive to styles, so I like to write basic styles and optimize them in browser debug mode

Fourth, effect realization

That’s when we handle some click events

4.1 Obtain the data of the previous page and the next page by calculating the attributes

  computed: {                  
    prevIndex() {              
      if (this.currentIndex === 0) {
        return this.data.length - 1
      } else {                 
        return this.currentIndex - 1
      }
    },
    nextIndex() {              
      if (this.currentIndex === this.data.length - 1) {
        return 0               
      } else {                 
        return this.currentIndex + 1
      }
    }
  },
Copy the code

4.2 Implement the method of clicking specific page number

    gotoPage(index) {
      this.currentIndex = index                                                                                                                                                                           
    }
Copy the code

4.3 Implementing the timer method

    runInv() {                 
      this.timer = setInterval(() => {
        this.gotoPage(this.nextIndex)
      }, 3000)
    },
Copy the code

It needs to be called once when the page loads

As to the mouse move up, whether custom timer, personal feeling completely unnecessary