仿造网易云音乐轮播图

最新推荐文章于 2024-06-27 19:41:31 发布

我爱丁丁猫

最新推荐文章于 2024-06-27 19:41:31 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： Vue.js

原文链接：https://www.mk2048.com/blog/blog.php?id=01ihb2ikjb&title=%E4%BB%BF%E9%80%A0%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E8%BD%AE%E6%92%AD%E5%9B%BE

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

这几天忙着毕业设计，其中一个页面需放上轮播图，遂听着音乐在网上寻(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'
    }
  }