vue轮播图

vue轮播图的实现

实现网易云音乐pc端主页的轮播图效果。

目标效果：

实现效果：

实现

轮播图实现的方法很多，这是我实现的方法。
思路：根据图片的位置，设置不同的样式，分为左，中，右，后。然后使用过度实现动画效果。使用setinterval计时。

基本内容

内容和样式

<template>
  <div class="banner">
    <ul class="banner__swap">
      <li v-for="(item, index) in banners"
      :key="index"
      :class="{banner__swap__item: Math.abs(index - showIndex) > 1,
      'banner__swap__left': index === showIndex-1 ,
      'banner__swap__right': index === showIndex+1,
      'banner__swap__show': index === showIndex
      }">
        <img :src="item.imageUrl" alt="" class="banner__swap__item__image">
      </li>
    </ul>
  </div>
</template>
<script>
//获取轮播图数据
import {
      getBanner } from '../../../api/api-banner'
export default {
     
  name: 'Banner',
  data () {
     
    return {
     
      banners: [],
      showIndex: 1,
      timeOut: 0
    }
  },
  methods: {
     
    async getBannerData () {
     
      const result = await getBanner()
      this.banners = result.banners
    }
  },
  created () {
     
    this.getBannerData()
    this.startBanner()
  }
}
</script>


<style lang='scss'>
.banner{
     
  position: relative;
  height: 230px;
  &__swap{
     
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    &__item{
     
      display: block;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      transition: all 1500ms  ;
      width: 540px;
      height: 200px;
      z-index: 1;
      &__image{
     
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }
    }
    &__left{
     
      position: absolute;
      width: 432px;
      height: 160px;
      left: 0;
      top: 20px;
      transform: none;
      z-index: 2;
      transition: all  1500ms ;
      &__image{
     
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }
    }
    &__right{
     
      position: absolute;
      width: 432px;
      height: 160px;
      right: 0;
      top: 20px;
      left: unset;
      transform: none;
      z-index: 2;
      transition: all  1500ms ;
      &__image{
     
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }
    }
    &__show{
     
      position: absolute;
      left: 50%;
      top:0;
      transform: translateX(-50%);
      transition: all 1500ms ;
      z-index: 3;
      &__image{
     
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

getBanner（）可以获取轮播图数据。

这是返回的信息：

具体的数据：

这里我们只需要图片地址。

轮播图随时间滚动

这里只需要设置定时器，定时更改showIndex的值，各图片的样式就会发生变化，产生过度效果，就动起来了。

<script>
import {
      getBanner } from '../../../api/api-banner'
export default {
     
  name: 'Banner',
  data () {
     
    return {
     
      banners: [],
      showIndex: 1,
      timeOut: 0
    }
  },
  methods: {
     
    async getBannerData () {
     
      const result = await getBanner()
      console.log(result.banners)
      this.banners = result.banners
      this.banners.push(result.banners[0])
      this.banners.unshift(result.banners[result.banners.length - 2])
      console.log(this.banners)
    },
    // 开始轮播
    startBanner () {
     
      this.timeOut = setInterval(() => {
     
        this.showIndex++
        if (this.showIndex >= this.banners.length - 2) {
     
          this.showIndex = 1
        }
      }, 5000)
    }
 }
  created () {
     
    this.getBannerData()
    this.startBanner()
  }
}
</script>

鼠标悬浮停止滚动

添加鼠标悬浮事件，在回调函数中停止计时。

	//添加事件
  <div class="banner" @mouseover="overStop" @mouseout="outStart">


<script>
methods: {
     
// 鼠标停留停止计时
    overStop () {
     
      clearInterval(