vue中图片轮播

vue中轮播图的实现

轮播图中html结构一般由主体图片、下方小圆圈、上一张和下一张组成。

主体图片能够实现两秒切换一次，并且对应的小圆圈被选中

点击上一张和下一张按钮切换相应图片，同时小圆圈产生变化。

点击小圆圈切换图片

鼠标放在图片主体上停止轮播，鼠标离开主体图片开始轮播。

html结构

<div class="container">
    <div class="lunbo" @mouseenter="clear" @mouseleave="run">
        //1、主体图片
      <div class="img">
        <img :src="dataList[currentIndex]" alt="" />
      div>
        //2、下方圆圈
      <div class="dooted" v-if="this.dataList.length">
        <ul class="doo">
          <li
            v-for="(item, index) in this.dataList"
            :key="index"
            :class="{ current: currentIndex == index }"
            @click="gotoPage(index)"
          >li>
        ul>
      div>
        //3、下一张
      <div class="right turn" @click="next()">
        <i class="el-icon-arrow-right">i>
      div>
        //4、上一张
      <div class="left turn" @click="up()">
        <i class="el-icon-arrow-left">i>
      div>
    div>

  div>

data()

data中定义轮播的图片，显示图片的索引值，定时器。

通过索引值来控制展示哪张图片

  data () {
    return {
      dataList: [
        'https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
        'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
        'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg'
      ],
      currentIndex: 0, // 默认显示图片
      timer: null // 定时器
    }
  },

created

created中 进入就开始轮播

  created () {
    this.run()
  },

methods

methods中

  methods: {
      //点击小圆圈切换图片
    gotoPage (index) {
      this.currentIndex = index
    },
      //下一张
    next () {
      if (this.currentIndex === this.dataList.length - 1) {
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
    },
      //上一张
    up () {
      if (this.currentIndex === 0) {
        this.currentIndex = this.dataList.length - 1
      } else {
        this.currentIndex--
      }
    },
      //清除定时器
    clear () {
      clearInterval(this.timer)
    },
    // 定时器
    run () {
      this.timer = setInterval(() => {
        this.next()
      }, 2000)
    }
  }

完整代码

<template>
  <div class="container">
    <div class="lunbo" @mouseenter="clear" @mouseleave="run">
      <div class="img">
        <img :src="dataList[currentIndex]" alt="" />
      </div>
      <div class="dooted" v-if="this.dataList.length">
        <ul class="doo">
          <li
            v-for="(item, index) in this.dataList"
            :key="index"
            :class="{ current: currentIndex == index }"
            @click="gotoPage(index)"
          ></li>
        </ul>
      </div>
      <div class="right turn" @click="next()">
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="left turn" @click="up()">
        <i class="el-icon-arrow-left"></i>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [
        'https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
        'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
        'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg'
      ],
      currentIndex: 0, // 默认显示图片
      timer: null // 定时器
    }
  },
  created () {
    this.run()
  },
  methods: {
    gotoPage (index) {
      this.currentIndex = index
    },
    next () {
      if (this.currentIndex === this.dataList.length - 1) {
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
    },
    up () {
      if (this.currentIndex === 0) {
        this.currentIndex = this.dataList.length - 1
      } else {
        this.currentIndex--
      }
    },
    clear () {
      clearInterval(this.timer)
    },
    // 定时器
    run () {
      this.timer = setInterval(() => {
        this.next()
      }, 2000)
    }
  }
}
</script>

<style lang="less" scoped>
ul li {
  float: left;
  width: 30px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: rgba(240, 238, 238, 0.8);
  font-size: 14px;
}
.container {
  position: relative;
  height: 200px;
  width: 402px;
  margin: 0 400px;
  .img {
    height: 200px;
    width: 400px;
    border: 1px solid gray;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .dooted {
    position: absolute;
    bottom: -10px;
    right: 0px;
  }
}
.turn {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #d0d0d073;
}
.right {
  position: absolute;
  top: 100px;
  right: 0;
}
.left {
  position: absolute;
  top: 100px;
  left: 0;
}
.current {
  color: gray;
}
</style>