仿造網易雲音樂輪播圖

這幾天忙着畢業設計，其中一個頁面需放上輪播圖，遂聽着音樂在網上尋(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'
    }
  }
複製代碼

結語

到這裏，一個簡易版的網易輪播圖就完成了，確實還存在一些不足，筆者也在盡力去完善它，一入前端深似海，我們還有很長的路要走，望與君共勉～ 固然咯，若是這篇文章對你有一丁點啓發的話，不妨點個喜歡或收藏，這將是我更大的動力😊 。