起因： 

做了個滾動效果，除了自適應以外，都和騰訊AI開發平臺的效果相似。

主要技術點：

1.動畫淡入淡出切換圖片

2.輪播滾動效果 + hover改變選中滾動狀態

3.文字切換展示

1.動畫淡入淡出切換圖片（通過控制CSS來改變效果）

JS程式碼：

// 替換class達到淡入淡出的效果
  fadeIn(e) {
    e.className = "time-slider-item fadein";
  }
  fadeOut(e) {
    e.className = "time-slider-item ";
  }

  // 替換class達到loading的效果
  easeIn(e) {
    e.className = "loading-line-progress loading-line-progress-select";
  }
  easeOut(e) {
    e.className = "loading-line-progress ";
  }

  // 替換選中背景色
  selectIn(e) {
    e.className =
      "time-slider-pagination-item time-slider-pagination-item-select";
  }
  selectOut(e) {
    e.className = "time-slider-pagination-item ";
  }
 

CSS程式碼：

// loading載入,寬度從 0-> 248
.loading-line-progress-select {
  width: 248px;
  transition: width 3s ease-in;
}


// 淡入效果
.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
  transition: opacity 1s linear;
}

// 選中改變顏色
.time-slider-pagination-item-select {
  background-color: rgba(29, 245, 255, 0.15);
}
 

2.輪播滾動效果 + hover改變選中滾動狀態

React對應的HTML程式碼：

<div className="time-slider">
        <div className="time-slider-cover" id="time-slider-cover">
          {this.state.info.map(function(item, index, array) {
            return (
              <div
                className="time-slider-item"
                key={index + "_time-slider-item"}
              >

                <div className="time-slider-text layout-max-width">
                  <div className="time-slider-title">{item.title}</div>
                  {item.desc1 ? (
                    <div className="time-slider-desc">{item.desc1}</div>
                  ) : null}
                  {item.desc2 ? (
                    <div className="time-slider-desc">{item.desc2}</div>
                  ) : null}
                  {item.desc3 ? (
                    <div className="time-slider-desc">{item.desc3}</div>
                  ) : null}
                </div>

                <div
                  className="time-slider-img"
                  style={{ backgroundImage: "url(" + item.bannerPic + ")" }}
                >
                  {" "}
                </div>

              </div>
            );
          }, this)}
        </div>
      </div>
 

對應JS程式碼分析如下：

初始化時，設定該播放的輪播圖片是第0個，info為全域性獲取的圖片值

    this.state = {
      info: info,
      cur_img: 0
    };

設定定時輪播，如果在輪播中，清空之前的輪播，開始hover狀態後的輪播

  // 自動輪播圖片 + hover時候切換
  setIntervalTurn(index, isStop) {
    //申明圖片陣列中當前的輪播圖片
    let info = document.getElementById("time-slider-cover").children;
    let pagination = document.getElementsByClassName("loading-line-progress");
    let paginationSelect = document.getElementsByClassName(
      "time-slider-pagination-item"
    );
    if (isStop) {
      window.clearInterval(timer);
      // 清空原來的背景
      for (var i = 0; i < info.length; i++) {
        this.fadeOut(info[i]);
        this.easeOut(pagination[i]);
        this.selectOut(paginationSelect[i]);
      }
    }

    let startTurn = index || 0;
    this.fadeIn(info[startTurn]);
    this.easeIn(pagination[startTurn]);
    this.selectIn(paginationSelect[startTurn]);

    //設定輪播間隔，並且改變輪播的圖片
    this.setState({
        cur_img: index
      },
      () => {
        timer = window.setInterval(this.turnImgs.bind(this), 3000);
      }
    );
  }

Hover選中時，輪播對應的圖片

  // hover時，選中當前，並且載入loading
  onhover(index, event) {
    this.setIntervalTurn(index, true);
  }

圖片輪播函式，用於定時輪播圖片

 turnImgs() {
    let self = this;
    let info = document.getElementById("time-slider-cover").children;
    let pagination = document.getElementsByClassName("loading-line-progress");
    let paginationSelect = document.getElementsByClassName(
      "time-slider-pagination-item"
    );
    let cur_img = this.state.cur_img;

    // 第一個
    if (cur_img === info.length - 1) {
      this.setState({
          cur_img: 0
        },
        () => {
          // 淡出
          self.fadeOut(info[info.length - 1]);
          self.easeOut(pagination[info.length - 1]);
          this.selectOut(paginationSelect[info.length - 1]);
          // 淡入
          self.fadeIn(info[0]);
          self.easeIn(pagination[0]);
          this.selectIn(paginationSelect[0]);
        }
      );
    }
    // 除了第一個以外的其他個
    else {
      this.setState({
          cur_img: cur_img + 1
        },
        () => {
          // 淡出
          self.fadeOut(info[self.state.cur_img - 1]);
          self.easeOut(pagination[self.state.cur_img - 1]);
          this.selectOut(paginationSelect[self.state.cur_img - 1]);
          // 淡入
          self.fadeIn(info[self.state.cur_img]);
          self.easeIn(pagination[self.state.cur_img]);
          this.selectIn(paginationSelect[self.state.cur_img]);
        }
      );
    }
  }

3.文字切換展示

主要根據 cur_img 目前的展示順序，再從 info 裡取出對應的資料，即：info[cur_img].text 的形式， 同步切換文字

        <div className="time-slider-pagination">
          <div
            className="time-slider-pagination-inside"
            id="time-slider-pagination-inside"
          >
            {this.state.info.map(function(item, index, array) {
              return (
                <div
                  onMouseOver={this.onhover.bind(this, index)}
                  key={index + "_time-slider-item-pagination"}
                  className="time-slider-pagination-outer cursor_pointer"
                  style={{ display: !!item.subTitle ? "block" : "none" }}
                >
                  <div className="time-slider-pagination-item">
                    <div className="time-slider-pagination-text layout-max-width">
                      <div
                        className="time-slider-pagination-img"
                        style={{ backgroundImage: "url(" + item.subIcon + ")" }}
                      >
                        {" "}
                      </div>
                      <div className="time-slider-pagination-title">
                        {item.subTitle}
                      </div>
                    </div>
                  </div>
                  <div className="loading-line">
                    <div className="loading-line-progress" />
                  </div>
                </div>
              );
            }, this)}
          </div>
        </div>

DEMO效果

相關連結