仿造网易云音乐轮播图

这几天忙着毕业设计，其中一个页面需放上轮播图，遂听着音乐在网上寻(chao)找(xi)灵(an)感(li)，猛地发现原来网易云音乐客户端的轮播图就很是好看，因此就尝试着模仿了一个，虽然十分简陋，但好在也迈出了第一步。

最终效果：

(为啥放上去的 gif 图片这么小呢？😭 )

给你们补张截图吧：

我是用 Vue 框架＋less 写的这个轮播图，这里有一个难点就是左右两边图片的角度，由于是新手，因此捣鼓了一些时间，但愿大神们不要见笑哈～

ok，废话很少说，来进入正题： 轮播图的原理你们应该都知道，那让我再重复一遍(23333)，假设如今有6张图片，将6张图左浮动排列，而且被一个 list 容器包裹，因此这个 list 的 width 会很大，而后 list 有一个 div 父容器，div 的宽度只有一张图片那么大，同时设置它的 overflow 为 hidden，这里 div 的 position 是 relative，list 的 position 是 absolute，最后经过调节 list 的 left 值来实现图片的显示切换。

html ( template 模版) 代码：

初步的 less 代码：

.slider {
    position: relative;
    margin: 0 auto;
    width: 468px;
    height: 200px;
    overflow: hidden;
    ul {
      position: absolute;
      padding: 0;
      width: 2808px;
      li {
        float: left;
        list-style: none;
        z-index: 3;
        img {
          width: 468px;
          border-radius: 3px;
        }
      }
    }
  }
复制代码

中间的轮播图样式写好后，开始写左右两边的图片，这里要借助 perspective 属性 和 transform 的 rotate () css函数。

perspective 用于设置元素被查看位置的视图，须要注意的是当元素定义 perspective 属性时，其子元素会得到透视效果，而不是元素自己，因此咱们须要在左右图片的父容器上定义 perspective 属性，另外目前浏览器都不支持 perspective 属性 😅 ，不过 Chrome 和 Safari 支持替代的 -webkit-perspective 属性 😜 ；而后在左右图片上设置 transform：rotate () 来制造一个2D 旋转，经过调节 perspective 和 rotate 里角度的值，就能够实现网易云音乐轮播图左右两侧图片的效果了。

左右图片的 less 代码：

.around {
    perspective: 200;
    -webkit-perspective: 200;
    cursor: pointer;
    .pre {
      position: absolute;
      height: 136px;
      top: 31px;
      left: 300px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      transform: rotateY(7deg);
    }
    .next {
      position: absolute;
      height: 136px;
      top: 31px;
      left: 766px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      transform: rotateY(-7deg);
    }
  }
复制代码

最后在轮播图底下放上小圆点，以便用户点击跳到指定图片上：

.pointer {
    display: flex;
    justify-content: center;
    font-size: 20px;
    line-height: 20px;
    color: gray;
    cursor: pointer;
    :first-child {
      color: orange;
    }
    li {
      margin-right: 2px;
    }
  }
复制代码

这样，轮播图的样式就写好了，接下来该写 js 来实现自动播放、左右切换以及点击圆点跳转。 这里的逻辑挺简单，就不一一叙述了，主要注意两个临界点，当前图片为第一张与最后一张这两种状况下左右图片的展现以及点击切换的逻辑。

js 代码：

created () {
    // 初始化小圆点的个数；
    this.pointer.length = 6
    // 设置定时器；
    setInterval(() => {
      this.replace(true)
    }, 3000)
  },
  methods: {
    replace (right, pointer) {
      // 每次调用 replace 方法时，将以前橙色的小圆点 color 改为灰色；
      this.$refs.pointer[this.index].style.color = 'gray'
      // 经过传进来的第一个参数判断是向左仍是向右切换；
      this.index = right ? this.index += 1 : this.index -= 1
      /** 若是有传第二个参数，即点击了小圆点，更改当前 index 由于点击第一个小圆点时传进来的 pointer 为 0，会被判为 false， 因此在点击圆点传参数时增长了 1，以后在赋值给 index 时需减去； **/
      if (pointer) this.index = pointer - 1
      // 实现主轮播图的 “无限循环”；
      if (this.index > 5) {
        this.index = 0
      } else if (this.index < 0) {
        this.index = 5
      }
      // 实现左右两侧图片的循环；
      if (this.index === 0) {
        this.$refs.pre.src = this.slider[5].src
        this.$refs.next.src = this.slider[this.index + 1].src
      } else if (this.index === 5) {
        this.$refs.pre.src = this.slider[this.index - 1].src
        this.$refs.next.src = this.slider[0].src
      } else {
        this.$refs.pre.src = this.slider[this.index - 1].src
        this.$refs.next.src = this.slider[this.index + 1].src
      }
      // 给当前图片对应的小圆点 “上色”；
      this.$refs.pointer[this.index].style.color = 'orange'
      // 移动 list 的位置，即更换当前显示图片；
      this.$refs.list.style.left = -(this.index * 468) + 'px'
    }
  }
复制代码

结语

到这里，一个简易版的网易轮播图就完成了，确实还存在一些不足，笔者也在尽力去完善它，一入前端深似海，我们还有很长的路要走，望与君共勉～ 固然咯，若是这篇文章对你有一丁点启发的话，不妨点个喜欢或收藏，这将是我更大的动力😊 。