vue简单实现轮播图

一 准备数据
(1)定义一个dataList，里面存放我们的图片
dataList:['../../static/images/300.jpg','../../static/images/301.jpg']
(2)currentIndex：来表示当时当前图片的索引

currentIndex:0

二、显示一张图片

 
"banner">

    
"item">
      <img :src="dataList[currentIndex]">

    
   
 

这样就显示了索引为0的图片了
三、遍历dataList，通过索引来访问图片

 
"banner">

    
"item">
      <img :src="dataList[currentIndex]">

    
   

     
"(data,index) in dataList" :key="index" @click="setCurrentIndex(index)" :style="{backgroundColor:currentIndex==index?'green':''}">
       第{{index+1}}张
     
   
 

写个setCurrentIndex方法

 setCurrentIndex (index) {
      this.currentIndex=index
    }

这样我们就可以点击图片的索引访问了
四、实现图片定时轮播
写一个计算属性nextIndex

nextIndex () {
      if (this.currentIndex==this.dataList.length-1){
        return 0
      } else {

        return this.currentIndex+1
      }
      console.log('currentIndex:' + this.currentIndex)
      return this.currentIndex
    }

在设置个定时器

 setInterval(() => {
      this.setCurrentIndex(this.nextIndex)
    },3000)

这样就可以实现图片的轮播以及点击相应的图片索引访问了

完整代码：