vue简单实现轮播图

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

currentIndex:0

二、显示一张图片

 <div class="banner">

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

    </div>
   </ul>
 </div>

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

 <div class="banner">

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

    </div>
   <ul>
     <li v-for="(data,index) in dataList" :key="index" @click="setCurrentIndex(index)" :style="{backgroundColor:currentIndex==index?'green':''}">
       第{{index+1}}张
     </li>
   </ul>
 </div>

写个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)

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

完整代码：

<template>
 <div class="banner">

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

    </div>
   <ul>
     <li v-for="(data,index) in dataList" :key="index" @click="setCurrentIndex(index)" :style="{backgroundColor:currentIndex==index?'green':''}">
       第{{index+1}}张
     </li>
   </ul>
 </div>

</template>

<script>
export default {
  name: "Test",
  data () {
    return {
      dataList:['../../static/images/300.jpg','../../static/images/301.jpg'],
      currentIndex:0
    }
  },
  methods: {
    setCurrentIndex (index) {
      this.currentIndex=index
    }

  },
  created() {
    console.log( this.dataList.length)
  },

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

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

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

<style scoped  lang="less">
 
  ul{
    list-style-type: none;
    display: flex;

    li{
      width: 50px;
      &:hover{
        cursor: pointer;
      }
    }
  }

</style>