摘要：說明此版本輪播圖為仿照網(wǎng)易云音樂播放器上首頁(yè)的輪播。網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過渡效果并不是滑動(dòng)過渡，而是一個(gè)跳出過渡，此方面原理與最開始設(shè)計(jì)輪播排版時(shí)候有極大關(guān)聯(lián)。

此版本輪播圖為仿照網(wǎng)易云音樂PC播放器上首頁(yè)的輪播。

網(wǎng)易的輪播特殊的地方就在于，如果你滑動(dòng)不相鄰的兩張圖片，其過渡效果并不是滑動(dòng)過渡，而是一個(gè)跳出過渡，此方面原理與最開始設(shè)計(jì)輪播排版時(shí)候有極大關(guān)聯(lián)。

此輪播為純r(jià)eact環(huán)境下的es6寫法，通過對(duì)state中數(shù)組的重組排列，配合樣式。達(dá)到輪播的效果

無任何依賴，最終效果為封裝成react組件開放接口并發(fā)布出去

注：此文章為正推，并在開發(fā)完成后進(jìn)行總結(jié)優(yōu)化。

此方面的文章應(yīng)該很多，我就不必過多介紹，去github上找個(gè)react腳手架搭建一下基本項(xiàng)目框架即可。

我用的框架為改良過的一版本dva框架。react腳手架，github上很多，推薦自己選擇一款進(jìn)行改良，我用的并不一定適合你。

1.大于4張尺寸相同圖片。(本人為八張圖片命名1-8)
2.react環(huán)境
3.網(wǎng)易云PC播放器

先把首張圖片和左右兩側(cè)能看見的圖片位置擺好,
最開始的靜態(tài)結(jié)構(gòu)是這個(gè)樣子的
新手注意：如發(fā)現(xiàn)代碼刺眼，less、es6語法自行惡補(bǔ)

import React from "react";

import styles from "./Slide.less";

class Slide extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dir: [
        { name: "middle" },
        { name: "start" },
        { name: "normal" },
        { name: "normal" },
        { name: "normal" },
        { name: "normal" },
        { name: "normal" },
        { name: "end" },
      ],
    };
  }
  render() {
    const { dir } = this.state;
    return (
      

        {/* 外部容器*/}
        

          {/* 內(nèi)部循環(huán)*/}
          {
            dir.map((item, key) => {
              return (
                
 // 此處偷懶
                  
                  
{""}
                
              );
            })
          }
        
      
    );
  }
}

export default Slide;

less如下

.root{
  width: 100%;
  background: #ccc;
  .slideBox{
    width: 50%;
    height: 15vw;
    margin: 0 auto;
    position: relative;
    background: #ccc;
    .slide{
      position: absolute;
      img{
        width: 100%;
      }
      .masking{ // 蒙板，有個(gè)灰度漸變的效果
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .15);
      }
      &.middle{ // 此為中間展示的那張
        left: 10%;
        bottom: 0%;
        width: 80%;
        z-index: 33;
      }
      &.start{ // 第一張則為左側(cè)那張
        left: 0%;
        bottom: 0%;
        width: 75%;
        z-index: 22;
        }
      &.end{ // 最后一張及右側(cè)那張
        right: 0%;
        bottom: 0%;
        width: 75%;
        z-index: 22;
      }
      &.normal{ // 此為隱藏圖片的樣式
        left: 13%;
        bottom: 0%;
        width: 74%;
        z-index: 11;
      }
    }
  }
}

這樣最開始的位置就擺好了。

隱藏圖片的位置很重要，因?yàn)樯厦嬉舱f了，跨圖片滑動(dòng)時(shí)需要改成跳出效果。大概在如下位置，展示的那張圖片完美的將其擋住。

接下來，進(jìn)行事件添加。我們先不管輪播下方的一排導(dǎo)航點(diǎn)。先加上左右點(diǎn)擊操作。

在蒙板層加上onClick操作，(也可以加在slide層) 如下：

 this.slide(item.name, key)}
>{""}

點(diǎn)擊圖片時(shí)的方法

slide(name, key) {  // 圖片點(diǎn)擊邏輯
    // 記錄當(dāng)前節(jié)點(diǎn)
    this.setState({ current: key });
    // 數(shù)組操作方法
    this.imgArr(name);
  }

數(shù)組操作方法

imgArr(name) { // 數(shù)組處理
    let dirCopy = this.state.dir;
    if (name === "start") {  // 點(diǎn)擊左側(cè)那張
      const pop = dirCopy.pop(); // 從數(shù)組尾部彈出一個(gè)元素
      dirCopy.unshift(pop); // 尾部元素添加到數(shù)組頭部
    } else if (name === "end") { // 點(diǎn)擊右側(cè)那張
      const shift = dirCopy.shift(); // 從數(shù)組頭部彈出一個(gè)元素
      dirCopy.push(shift);  // 添加到數(shù)組尾部
    }
    this.setState({ dir: dirCopy }); // 保存重新排列的數(shù)組 并觸發(fā)render
}

過渡樣式添加

1.過渡樣式主要有旋轉(zhuǎn)時(shí)，蒙版層的漸變。
2.旋轉(zhuǎn)時(shí)平滑的定位過渡。
3.旋轉(zhuǎn)時(shí)層級(jí)的變化放在優(yōu)化環(huán)節(jié)多帶帶講解。

.slide{
    ... , // 此處為原樣式保留的意思(下面都以此規(guī)則顯示)
    transition: all 0.3s ease-in-out;
    user-select: none; // 禁止用戶選中(防止圖片被選中時(shí)變色);
    &:hover{ // 鼠標(biāo)經(jīng)過時(shí)顯示小手樣式
      cursor: pointer;
    }
}

.masking{
    ... ,
    transition: all 0.3s 0.2s linear;
}

&.middle{
    ... ,
    .masking{
      background: transparent;
    }
}

這個(gè)樣子的話點(diǎn)擊圖片左右兩側(cè)時(shí)就可以初步旋轉(zhuǎn)起來了。

到此為止的步驟所完成的樣式輪播為最基礎(chǔ)的‘旋轉(zhuǎn)木馬es6版本’，有需要的朋友已經(jīng)可以在以上代碼中進(jìn)行優(yōu)化總結(jié)，放在自己的項(xiàng)目中去。

菜單按鈕開發(fā)

動(dòng)態(tài)的根據(jù)圖片的數(shù)量循環(huán)出菜單按鈕的數(shù)量，代碼跟圖片循環(huán)類似。

  ... ,
  {/* 導(dǎo)航按鈕*/}
  

    {
      this.state.dir.map((item, key) => { // 根據(jù)圖片數(shù)量進(jìn)行循環(huán)
        return (
           this.pointFunc(key - 1)} // 鼠標(biāo)進(jìn)入動(dòng)畫
          >{}
        );
      })
    }
  

樣式方面：

  .point{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -23px;
    z-index: 999;
    text-align: center;
    span{
      display: inline-block;
      width: 20px;
      height: 3px;
      background-color: #2E3033;
      margin-left: 9px;
      &.hover{
        background-color: #7F8082;
      }
      &:hover{
        cursor: pointer;
      }
    }
  }

鼠標(biāo)進(jìn)入方法pointFunc();

  pointFunc(index) { // 按鈕點(diǎn)擊
    const { current } = this.state;
    const dirCopy = this.state.dir;
    if (index < current) { // 鼠標(biāo)經(jīng)過左側(cè)的按鈕
      for (let i = 0; i < (current - index); i += 1) { // 判斷距離
        const shift = dirCopy.shift(); // 進(jìn)行數(shù)組操作
        dirCopy.push(shift);
      }
    } else if (index > current) { // 鼠標(biāo)經(jīng)過右側(cè)的按鈕
      for (let i = 0; i < (index - current); i += 1) {
        const pop = dirCopy.pop();
        dirCopy.unshift(pop);
      }
    }
    this.setState({ dir: dirCopy }); // 觸發(fā)react-render重新渲染頁(yè)面
    this.setState({ current: index }); // 記錄當(dāng)前圖片節(jié)點(diǎn)
  }

加完按鈕圖片后效果如下：

這個(gè)時(shí)候，核心效果已經(jīng)出來了，經(jīng)過嚴(yán)謹(jǐn)?shù)牟季趾蛣?dòng)畫調(diào)節(jié)后，最終達(dá)到了預(yù)期的網(wǎng)易播放器的特殊動(dòng)畫效果。（鼠標(biāo)經(jīng)過相鄰的圖片時(shí)為滑動(dòng)，經(jīng)過不相鄰圖片按鈕的時(shí)候改為跳動(dòng)效果）。

代碼效果

注：樣式方面還有需要優(yōu)化的地方請(qǐng)自行調(diào)節(jié)

在這個(gè)組件模式開發(fā)時(shí)代，如果你做的東西不能保留下來并且開放出去，我認(rèn)為是一件可悲的事情。所以下一篇文章將把此react組件進(jìn)行開放式處理，開放一些可調(diào)節(jié)接口、響應(yīng)式處理，并且最后打包成npm包，以插件的形式開放出去。