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

<script>
export default {
  name: 'BannerComponent',
  data () {
    return {
      bannerData: [

        // 这里的图片请替换为您想要显示的图片
        require('@/assets/社区首页-banner1.png'),
        require('@/assets/社区首页-banner2.png'),
        require('@/assets/社区首页-banner3.png')
      ],
      currentIndex: 0,
      timer: null
    }
  },
  computed: {
    prevIndex () {
      if (this.currentIndex === 0) {
        return this.bannerData.length - 1
      } else {
        return this.currentIndex - 1
      }
    },
    nextIndex () {
      if (this.currentIndex === this.bannerData.length - 1) {
        return 0
      } else {
        return this.currentIndex + 1
      }
    }
  },
  methods: {
    gotoPage (index) {
      this.currentIndex = index
    },
    runInv () {
      this.timer = setInterval(() => {
        this.gotoPage(this.nextIndex)
      }, 3000)
    }
  },
  created () {
    this.runInv()
  }
}
</script>

<style>

.banner {
  position: relative;
  margin-bottom: 0.7rem;
}

.banner .current,
.banner .page ul li {
  color: #ff6700;
}

.banner .page {
  background: rgba(0, 0, 0, .5);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
}

.banner .page ul {
  float: right;
}

.banner .page 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>