vue 手写轮播图

图片.png

第一种：
一、原理
在轮播图数组中，定义一个变量curId = 0表示第一张图片，默认渲染第一张图片即dataList[curId]，然后获取每张图片的下标。点击切换图片时把当前图片的下标赋值给curId即可实现图片切换显示。

二、定义变量

 curId: 0, // 当前选中的图片id(下标)
      timer: null, // 轮播图定时器
      imgsData: [
        {
          id: 0,
          url: this.$utils.getPng('banner1')
        },
        {
          id: 1,
          url: this.$utils.getPng('banner2')
        },
        {
          id: 2,
          url: this.$utils.getPng('banner1')
        },
        {
          id: 3,
          url: this.$utils.getPng('banner2')
        }
      ]

三、html渲染

   <div class="swiperView">
        <div class="swiperItemBox">
          <img
            v-for="item in imgsData"
            v-show="item.id===curId"
            :key="item.id"
            class="img"
            :src="item.url"
          />
        </div>
        <span class="title">赛博朋克2077风格</span>
        <div class="dots">
          <span
            v-for="item in imgsData"
            :key="item.id"
            @click="dotChange(item.id)"
            class="dot"
            :class="{on:curId===item.id}"
          ></span>
        </div>
      </div>

四、点击小圆点切换图片

// 轮播切换
    dotChange (index) {
      this.curId = index
    },

五、定时器切换图片
定义一个定时器，每X秒执行一次nextIndex()函数即可。

  swiperChange () {
      this.timer = setInterval(() => {
        this.dotChange(this.nextIndex)
      }, 12000)
    }

  computed: {
    // 上一张 可根据需求添加或删除
    // prevIndex () {
    //   if (this.curId === 0) {
    //     return this.imgsData.length - 1
    //   } else {
    //     return this.curId - 1
    //   }
    // },
    // 下一张
    nextIndex () {
      if (this.curId === this.imgsData.length - 1) {
        return 0
      } else {
        return this.curId + 1
      }
    }
  }

完整代码：
···
<template>
<div class="WhaleSelectPage">

  <div class="swiperView">
    <div class="swiperItemBox">
      <img
        v-for="item in imgsData"
        v-show="item.id===curId"
        :key="item.id"
        class="img"
        :src="item.url"
      />
    </div>
    <span class="title">赛博朋克2077风格</span>
    <div class="dots">
      <span
        v-for="item in imgsData"
        :key="item.id"
        @click="dotChange(item.id)"
        class="dot"
        :class="{on:curId===item.id}"
      ></span>
    </div>
  </div>

</div>
</template>
<script>
export default {
name: 'jx',
data () {
return {
searchVal: '', // 搜索值
curId: 0, // 当前选中的图片id(下标)
timer: null, // 轮播图定时器
imgsData: [
{
id: 0,
url: this.utils.getPng('banner2')
},
{
id: 2,
url: this.utils.getPng('banner2')
}
]
}
},
created () {
this.swiperChange()
},

methods: {
// 轮播切换
dotChange (index) {
this.curId = index
},
swiperChange () {
this.timer = setInterval(() => {
this.dotChange(this.nextIndex)
}, 12000)
}
},
computed: {
// 下一张
nextIndex () {
if (this.curId === this.imgsData.length - 1) {
return 0
} else {
return this.curId + 1
}
}
}
}
</script>

···
样式：

   .swiperView {
      border-radius: 6px;
      width: 396px;
      height: 226px;
      overflow: hidden;
      position: relative;
      .swiperItemBox {
        white-space: nowrap;
        height: 390px;
        font-size: 0;
        transition: all 0.2s;
        .img {
          width: 396px;
          height: 226px;
          object-fit: fill;
          object-position: center;
          display: inline-block;
        }
      }
      .title{
        position: absolute;
        left: 20px;
        bottom: 15px;
        color: #ffffff;
        font-size: 13px;
      }
      .dots {
        position: absolute;
        right: 20px;
        bottom: 15px;
        @include row;
        .dot {
          width: 9px;
          height: 9px;
          background-color: #f9fafb;
          margin-right: 6px;
          border-radius: 50%;
          cursor: pointer;
          &.on {
            width: 18px;
            height: 9px;
            background-color: #10c1d0;
            border-radius: 5px;
          }
        }
      }
    }

第二种，通过margin来控制图片位置

     <div class="swiperView">
        <div class="swiperItemBox" :style="'margin-left:'+marginVal+'px'">
          <img
            v-for="item in imgsData"
            :key="item.id"
            class="img"
            :src="item.url"
          />
        </div>
        <span class="title">赛博朋克2077风格</span>
        <div class="dots">
          <span
            v-for="(item,index) in imgsData"
            :key="item.id"
            @click="dotChange(index)"
            class="dot"
            :class="{on:curId===index}"
          ></span>
        </div>
      </div>

  created () {
    this.swiperChange()
  },

   // 轮播切换
    dotChange (index) {
      this.curId = index
      this.marginVal = -396 * index
    },
    swiperChange () {
      this.timer = setInterval(() => {
        let index = this.curId < this.imgsData.length - 1 ? this.curId + 1 : 0
        this.dotChange(index)
      }, 12000)
    },